CSS positioning help please

HTML & CSS
1

Website

Above is a website I am working on where I need to have the footer below all of the content. I have two content boxes which are floating to the left so I can add more boxes if I want and they will just appear below the top ones. Which works fine. But the footer does not stay at the bottom because of the floating boxes. As you can see the floating boxes push down the content of the footer but not the actual footer div. So the background image of the footer doesn’t move. I have been messing around with the positioning of the div’s but cannot figure it out. Any help would be greatly appreciated! This has happened to me on other projects as well. Would like to know how to keep the footer below all content.

Here is what the footer was supposed to look like.

2

Hi,

You need to clear the floats as margins, borders and backgrounds on elements that follow a float will slide underneath the float.

Floats are removed from the flow but make room for themselves by repelling the foreground content out of the way or allowing content to wrap. The elements on the page still live in the same containing block so their background always stretch to where they would have been had the float not be present.

Here’s a simple example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
	width:625px;
	margin:auto;
	background:green;
}
.float1, .float2 {
	float:left;
	width:300px;
	height:200px;
	background:blue;
}
.float2 { float:right }
.content { background:red; }
</style>
</head>

<body>
<div class="wrap">
		<div class="float1">Float</div>
		<div class="float2">Float</div>
		<div class="content">
				<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
		</div>
</div>
</body>
</html>

As you can see the red background slides under the two blue floats and can be seen in the gap in the middle. If you add clear:both to .content then the red background moves below the floats.

In your example you would need to add clear:both to the element that follows the float which is your copyright element I believe. Also note that a top margin on an element that follows a float will slide under the float and appear to have no effect so instead you should apply a bottom margin to the float instead.

3

DUH! The clear attribute. I hate myself sometimes haha. Thank you very much. Completely had a brain fart.