0

Hi,
I have a page with four primary DIVS layed out like:
http://wp-media.samrudge.co.uk/2010/01/1.png
using the CSS

body{
	background-color:#CCC;
}
#container{
	width:300px;
	height:auto;
	background-color:#00F;
	padding:10px;
}
#header{
	width:300px;
	margin:5px auto;
	background-color:#0FF;
	font-size:24px;
}
#left{
	width:200px;
	height:auto;
	background-color:#90F;
	float:left;
}
#right{
	width:100px;
	height:auto;
	background-color:#CF0;
	float:right;
}
#footer{
	width:300px;
	background-color:#0F0;
	float:none;

Using the HTML

<div id="container">
<div id="header">I am a header</div>
<div id="left">Left Column</div>
<div id="right">Right Column</div>
<div id="footer">I am a footer</div>
</div>

However when I add more content to eather the left column or the right column they overlap the footer
http://wp-media.samrudge.co.uk/2010/01/2.png
http://wp-media.samrudge.co.uk/2010/01/3.png
How can I make it so that the footer and container divs expand to fit the height of whichever is the longer div?
Thanx,
Sam

Edited by samarudge: n/a

3
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by Cragdo
0

Hi,

You need to clear the footer div of the left and right floats in the left and right columns.

#footer{
        clear:both;
	width:300px;
	background-color:#0F0;
}

The overlap happens because when you apply float to a div it removes that div from the Document flow hence the name float.

Cheers

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.