Solution to background color issue with nested DIV blocks
Submitted by ebrouwer on Tue, 08/10/2010 - 09:04
I just found a simple solution to an issue I've been having for a long time. Many times, I create a wrapper element that contains nested columns in my web designs. For example:
<style type="text/css">
<!--
#wrapper {
background-color: #00F;
width: 500px;
}
#leftCol {
background-color: #F00;
float: left;
width: 180px;
margin:10px;
padding:10px;
}
#rightCol {
float:right;
width: 280px;
margin:10px;
padding:10px;
}
#footer {
clear:both;
width:500px;
height:10px;
background-color:blue;
}
-->
</style>
<div id="wrapper">
<div id="leftCol">
<p>This is my left column.</p>
<p>It usually contains menu items and stuff like that.</p>
</div>
<div id="rightCol">
<p>This is my right column.</p>
<p>It usually contains the content for my sites. </p>
</div>
</div>
<div id="footer">
</div>
This gives me a red left column, and a white right column like this:
This is my left column.
It usually contains menu items and stuff like that.
This is my right column.
It usually contains the content for my sites.
Problem is, the wrapper should have a blue background, but because it contains no content itself, it doesn't turn blue.
Enter the easy solution...
overflow:hidden
Just adding this line to #wrapper gives me my blue background!
This is my left column.
It usually contains menu items and stuff like that.
This is my right column.
It usually contains the content for my sites.
»
- ebrouwer's blog
- Login or register to post comments