Archive for June 25th, 2008

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;
}

Min-Height For IE

Yes, a nice and clean code

min-height:222px;
height:auto !important;
height:222px;

just since !important is there it will help to make it recognized for firefox but not IE6 and so the min hight will work

Return top

INFORMATION

Change this sentence and title from admin Theme option page.