Should we use both overflow: hidden and display:inline?

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

I usually set display:inline; for floated elements, especially li's for horizontal navs. Older versions of IE tend to do weird things with margins otherwise. As far as overflow goes, usually it's used on the parent container to clear floats if you don't have any adjacent elements you can apply clear to. Should you apply overflow:hidden to the child elements as well? I can't recall at the moment, but it may help with older versions of IE expanding their parent container's borders when the child elements are too big. (Correct behavior dictates they should spill out of their container.) Either way, IE will always require a bit of tweaking to get right. :)

Answer 2

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.