PDA

View Full Version : Can't contain divs within a div



juanc
Jan 30th, 2010, 09:14 PM
Hi

I was hoping someone could help me here. This is my code

<code>

<style type="text/css">


#container{width: 700px; border: 1px solid blue }

#col1{ border: 1px solid green; width: 350px; float: left }

#col2{ border: 1px solid yellow; width: 150px; float: right }

</style>

<div id="container">

<div id="col1">
This is the main column
<br /><br /><br />
<br /><br /><br />

</div>

<div id="col2">This is the sidebar</div>

</div>


</code>

Basically I can't seem to contain divs col1 and col2 within the container div. I say this because the blue border of #container just appears as a blue line above divs col1 and col2.
You can see the output of this code at www.juanchandler.com/test.html #


At the same time if I were to remove the float properties from both col1 and col2 the problem is resolved in that the blue border of the container does wrap around the divs but then of course I need them to be floated.



I'm pretty sure this is something specific about inheritance that perhaps I've not yet grasped.

Please could someone help.


Many thanks



Juan

Excavator
Jan 30th, 2010, 09:28 PM
Hello juanc,
You need to clear the floats. Add overflow:auto; to the CSS for #container.

Read about clearing floats with overflow here (http://www.quirksmode.org/css/clearing.html).

bdl
Jan 30th, 2010, 09:33 PM
Great tip, Executor.

Also, make sure your STYLE tag element is in the document HEAD.

drhowarddrfine
Jan 30th, 2010, 10:17 PM
Please note that parent elements are never to expand to contain floated elements which is why "clearing" of floats is required to cause that effect.

nigelone
Jan 31st, 2010, 01:33 AM
below the 2nd div add

<div style="clear:both;height:0;">&nbsp;</div>


if it was 3 columns, you'd add it below the 3rd div

Excavator
Jan 31st, 2010, 02:15 AM
below the 2nd div add

<div style="clear:both;height:0;">&nbsp;</div>


if it was 3 columns, you'd add it below the 3rd div

That seems to be adding unnecessary markup. If you had a footer in your container, you could add clear:both; to it and that would be semantic (http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/) ... but I think adding empty divs with nonbreaking spaces is not a modern approach.