Welcome to WebmasterWorld Guest from 54.226.183.49

Forum Moderators: not2easy

Message Too Old, No Replies

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

Problem = There is no border around it.

     

Perfection

2:28 am on Aug 12, 2010 (gmt 0)

10+ Year Member



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

5:53 am on Aug 12, 2010 (gmt 0)

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

6:28 am on Aug 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there Perfection,

You may find illumination here...

birdbrain

Perfection

11:39 am on Aug 12, 2010 (gmt 0)

10+ Year Member



Bingo! Thanks guys.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month