Problems creating a 2 column layout with a border around it.

Problem = There is no border around it.

[Perfection]

I'm trying to create a basic 2 column layout. Content on the left, sidebar on the right.

I am also trying to put a border around the whole thing, but for some reason can't actually make it happen.

This is an example of something similar to my code...

<div style="width:950px; border: 1px solid black;">

<div style="float:left; width:650px;">
content stuff goes here
</div>

<div style="float:right; width:300px;">
sidebar stuff goes here
</div>

</div>

This creates a 2 column layout just like I want, except for one problem. That 1px black border I'm trying to put around it all isn't there.

What simple silly css-fail am I committing here?

Thanks in advance for any help.

[dreamcatcher]

Try adding a break after your floats. Also, height:100% for your main div is recommended to keep IE happy.

<div style="width:950px; border: 1px solid black; height:100%">

<div style="float:left; width:650px;">
content stuff goes here
</div>

<div style="float:right; width:300px;">
sidebar stuff goes here
</div>

<br style="clear:both" />

</div>

dc

[birdbrain]

Hi there Perfection,

You may find illumination here...

• "Clearing floats" article [quirksmode.org]

birdbrain

[Perfection]

Bingo! Thanks guys.