I am having such a hard time, making a 2 column layout within a central content div. I can make the 2 colums, float left and right and both have 50% and both line up, but the problem comes when i enter a lot of text into either one of the div's, the parent div (the once central div) does not extend its height to fit the new content of one of its child div's, it simply does not display the content div, unless i specify a height for it. i cant do this as the height depends upon what is inside one of its child div's.
If i specify a height for the content div such as 400px; it works fine, although it is actually 400px and does not snap to the height of the heighest child div.
Below is my code:
<!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" /> <style type="text/css"> * { margin: 0; padding:0;} body { background-color:#9b9b9b; width:978px; margin-left:auto; margin-right:auto; } #header { height:200px; width:auto; margin:0 auto; background-color:#0FF; } #main_content { background-color:#FF0; width:auto; margin-left:auto; margin-right:auto; height:auto; } #left_container { background-color:#F00; width:50%; float:left; height:auto; } #right_container { background-color:#0F0; width:50%; float:right; height:auto; } #footer { height:50px; margin:0 auto; background-color:#000; width:auto; clear:both; } </style> </head> <body> <div id="header"> <p>header stuff</p> </div> <div id="main_content"> <div id="left_container"> <p>Stuff for the left</p> </div> <div id="right_container"> <p> Stuff for the right</p> <p> Stuff for the right</p> <p> Stuff for the right</p> <p> Stuff for the right</p> <p> Stuff for the right</p> <p> Stuff for the right</p> </div> </div> <div id="footer"> <p>Footer stuff</p> </div> </body> </html>
Please can someone offer some help please, im ripping my hair out over this!!
Thanks,
Lucy
You may want to look at faux
You may want to look at faux columns for your fix.
Could use height:100%; tag
You could use the height:100%; but be sure to add it to body and html tag at start.
code attached:
* { margin: 0; padding:0;}
html, body {
background-color:#9b9b9b;
width:978px;
margin-left:auto;
margin-right:auto;
height:100%;
}
#header {
height: 20%;
width:auto;
margin:0 auto;
background-color:#0FF;
}
#main_content {
background-color:#FF0;
width:auto;
margin-left:auto;
margin-right:auto;
height:100%;
}
#left_container {
background-color:#F00;
width:50%;
float:left;
height:70%;
}
#right_container {
background-color:#0F0;
width:50%;
float:right;
height:70%;
}
#footer {
height:10%;
margin:0 auto;
background-color:#000;
width:auto;
clear:both;
}
header stuff
Stuff for the left
Stuff for the right
Stuff for the right
Stuff for the right
Stuff for the right
Stuff for the right
Stuff for the right