CSS question

I have a layout with the following structure:

#page {
	background-color:#000000;
	width: 780px;
	margin: 0px;
	padding: 0px;
}

#content {
	width: 650px;
	height: 500px;
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	float: right;
}
#sidebar {
	width: 130px;
	height: 450px;
	background-color:#666666;
	padding: 0px;
	margin: 0px;
	float: right;
}

Inside the body tags, I placed the following code:

<div id="page">

<div id="content">/*some content*/</div>
<div id="sidebar">/*navigation*/</div>

</div>

Now I am running in the following troubles. As you can see, the parent layer (page) has a black background, the others are white and grey, respectively. I would like the parent (background) layer to grow with the navigation/content layers, dependent on which layer is higher/taller... get the idea? Thus far, the parent layer "page" does not show at all, neither does its black background.

Any idea how to make it dependable? I've been trying hard to figure it out, can't seem to do it. Perhaps the float attibutes cause it not to have any influence on the parent layer? :chomp:

Thanks guys!

[Intrigue]

it's because when you float elements (eg: #content #sidebar) it gets taken out of the normal flow of the page, your best bet is to put another div around those two, float it left, and set clear: both on it and that should do it, if not, try setting clear: both; on #content as well

interesting. excuse my ignorance, but what does clear: do?

[jayeff]

Part of the problem is you are using zero margins and float right for both inner elements. Take a look at http://www.thenoodleincident.com/tut...son/boxes.html

that didn't work out... sucks! I think I will be better off just positioning the layers with position: relative; to the page layer and that should do the trick no?

brilliant, I totally forgot about it. I set the margin-left on the content layer (floated right) to 130px and voila! it worked!

Thanks guys a lot

[PussyTeenies]

uhm wanted to post something but the tread is allready anwserd

http://www.positioniseverything.net/easyclearing.html

That was exactly the problem I ran into! Fixxxxxed... thanks guys