Question

For floated elements should we always define display:inline along with overflow:hidden, when we clear float using overflow:hidden?

is it good for IE compatibility? should we always follow?

#secondary-col {
float:left;
overflow:hidden;
display:inline;

}

Answer 1

display: inline is a fix for IE6 to prevent the double-margin bug. If you ever float something, then it’s a good idea to include it. If you have an IE-specific stylesheet then it may be best to keep it there (it’s a useless property otherwise).

overflow: hidden is a technique used to force an element containing floating elements to take up the full height of the content. Example:

<div class="wrapper">
    <div class="floater">floating element</div>
</div>

Here, the height of the wrapper would be 0 since it only contains floating elements. To fix that, you add one of two properties to the wrapper: overflow: hidden or float: left.

Both will force the wrapper to have the correct height, however the float one will obviously float the element too, which you may not want. If the wrapper has a fixed height, then don’t use overflow because text may become hidden.

So basically, you don’t need overflow: hidden if you already have float: left. But you can keep display: inline for IE6.