2 replies [Last post]
lucyM
lucyM's picture
Offline
Regular
Last seen: 10 years 16 weeks ago
Timezone: GMT+1
Joined: 2009-03-17
Posts: 35
Points: 2

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

Thanks,
LucyM

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 45 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

You may want to look at faux

You may want to look at faux columns for your fix.

mega095
mega095's picture
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT+1
Joined: 2009-09-15
Posts: 1
Points: 0

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;
}

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