Welcome to WebmasterWorld Guest from 54.144.80.75

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.

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

Full Member

10+ Year Member

joined:June 27, 2001
posts:234
votes: 0


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.
5:53 am on Aug 12, 2010 (gmt 0)

Senior Member

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

joined:Mar 30, 2003
posts:3719
votes: 0


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
6:28 am on Aug 12, 2010 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


Hi there Perfection,

You may find illumination here...

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

Full Member

10+ Year Member

joined:June 27, 2001
posts:234
votes: 0


Bingo! Thanks guys.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members