2 column layout within a div

2 replies [Last post]

Tue, 2009-09-15 17:13

lucyM

Offline

Regular

Last seen: 12 years 1 week 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

Tags:

Beginners CSS Questions

Tue, 2009-09-15 18:06

downtap

Offline

Enthusiast

Dallas, TX

Last seen: 7 years 30 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.

Tue, 2009-09-15 22:25

mega095

Offline

newbie

Last seen: 12 years 44 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

2 column layout within a div

You may want to look at faux

Could use height:100%; tag

User login

Navigation