HTML and CSS Reference
In-Depth Information
Depending on the type of issue you're dealing with, one of the above two
solutions will resolve the issue in Internet Explorer. It should be noted that
the zoom property is a non-standard Microsoft proprietary property, and will
cause your CSS to become invalid.
So, because the :after pseudo-element solution does not work in IE6/7, is
a little bit bloated code-wise, and requires additional invalid IE-only styles,
this solution is not the best method, but is probably the best we've
considered so far.
SOLUTION 4: THE OVERFLOW PROPERTY
By far the best, and easiest solution to resolve the collapsing parent issue is
to add overflow: hidden or overflow: auto to the parent element.
It's clean, easy to maintain, works in almost all browsers, and does not add
extra markup.
You'll notice I said “almost” all browsers. This is because it does not work in
IE6. But, in many cases, the parent container will have a set width, which
fixes the issue in IE6. If the parent container does not have a width, you can
add an IE6-only style with the following code:
// This fix is for IE6 only
.clearfix {
height: 1%;
overflow: visible;
}
Search WWH ::




Custom Search