Hi all, I am trying to create a 3 column CSS layout and have a div that floats below the left column and moves relative to the content in the left menu. When I add content to the center column the left sub menu moves also? I have attached the code... Thanks for any help.... Paul <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #container { background-color:#999999; width:975px; height:300px; margin:auto; } #left-nav { background-color:#99CCFF; float:left; width:300px; } #center-content { background-color:#FFFF99; width:375px; margin: 0 300px 0 300px; } #right-nav { background-color:#9999FF; width:300px; float:right; } #sub-left-nav { background-color:#33CCCC; width:300px; clear:left; } --> </style></head> <body> <div id="container">Container <div id="left-nav">Left Nav <p> </p> <p> </p> </div> <div id="right-nav">Right Nav <p> </p> <p> </p> </div> <div id="center-content">Center Content <p> </p> <p> </p> <p> </p> </div> <div id="sub-left-nav">Sub Left Nav <p> </p> </div> </div> </body> </html>
Here, just wrap the left menu and the left sub menu in another div and give that div the float left property. I added a class named left_nav that I gave the property to. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #container { background-color:#999999; width:975px; height:300px; margin:auto; } .left_nav { float:left; width:300px; } #left-nav { background-color:#99CCFF; } #center-content { background-color:#FFFF99; width:375px; margin: 0 300px 0 300px; } #right-nav { background-color:#9999FF; width:300px; float:right; } #sub-left-nav { background-color:#33CCCC; width:300px; } --> </style></head> <body> <div id="container">Container <div class="left_nav"> <div id="left-nav">Left Nav <p> </p> <p> </p> </div> <div id="sub-left-nav"> Sub Left Nav <p> </p> </div> </div> <div id="right-nav">Right Nav <p> </p> <p> </p> </div> <div id="center-content">Center Content <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html> Code (markup):