You need to clear your floats. Add "overflow:
auto;" to your #parent div.
Here is a link explaining:
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Jimmy wrote:
I am so puzzled by this.
I've got following html and css of 2 column layout.
css:
div#parent{width:100%;border:solid 1px black;background-color:red;}
div#parent div#left, div#parent div#right{width:50%;}
div#left{float:left}
div#left{float:right}
html:
<div id="parent">
<div id="left">Left column</div>
<div id="right">Right column</div>
</div>
Left and right column line up correctly, they go out of parent div
(=#parent) therefore no red background is showing.
And I got rid of float values from both div#left and div#right which
makes both of them stacked on top of each other. And it stays in
div#parent hence red background appears. I've also tried messing
around with position attribute, but it didn't change anything.
Can anyone help me with this?
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
|
