When to use hight and when to use overflow
kinda tricky question but lets say
we had a code like
<style>
div#container
{
background-color:#FF0000;
}
div#someContent
{
float:left;}
</style>
<div id="container">
<div id="someContent">My Name =D</div>
</div>
In the case above we dont know how long our text will be so adding a fixed height to the "container" div is a real problem, also not adding a height at all is even worst .
Why? Because simply not adding a height to the "container" div means it wont take the size of the floated divs inside, and so the red background wont show.
One intresting solve to this problem is using overflow:hidden on the container div.
actually there is three cases to this
Container div that has flexible height (auto height)
div#container
{
background-color:#FF0000;
overflow:hidden;
}
Container div which has fixed height and hide anything over its height
div#container
{
background-color:#FF0000;
overflow:hidden;
height:100px;
}
Finally Container div which has fixed height however divs inside can go over it
div#container
{
background-color:#FF0000;
overflow:visible;
height:100px;
}
This entry was posted on Wednesday, June 25th, 2008 at 6:09 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.