Float Issue

Because of the lack of multiple background image capabilities, my page has several div's stacked. The " header" (full width) is fine. but the next two right column and left column, both using the Float to position them, endup falling below the stacked divs. Here is an example.

<div id="page">
	<div id="top">
		<div id="bot">
			<div id="header">
				my header stuff
			</div>
			<div id="content">
				<div id="left">
					some stuff in the left
				</div>
				<div id="right">
					some other stuff on the right
				</div>
			</div>
  		</div>
	</div>
</div>

Code (markup):

For my CSS page

#page {
	background-image: url(images/bg.jpg);
	background-repeat: repeat-y;
	background-position: center;
	width: 765px;
	margin: 0 auto 0 auto;
	}
	
#top {
	background-image: url(images/bgt.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#bottom {
	background-image: url(images/bgb.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}

#content {
}

#left {
	width: 500px;
	border-right: 1px solid #e6e6e6;
	padding: 10px 10px 10px 10px;
	float: left;
}

#right {
	width: 240px;
	float: right;
}

Code (markup):

Anything from the "content" on down is below the "bot" background image. When it should be (I want it to be) above the "bot" background image. If I eliminate the float for the left and right every thing is good, but not organized properly.

Is there anyway around this or perhaps a better method of doing this?

 

Do you have a page where this can be seen? I don't quite know what problem you are having, but I will assume it is one of the common problems people have with floats.

When you float an element, it is taken out of the normal flow of the page. The parent element will not extend to the size of the floated child element but will extend to the size of the non-floated child elements. To allow the parent element to extend to the size of the floated child element, set the parent element to "overflow: auto" (In your example, #content).

 

Assistant X is correct, you are not enclosing your floats.

So here is a nice link with some more explanation.

 

The overflow was the problem. Thanks very much. Overflow is unfortunatly one of many I haven't come across yet, until now!