HTML and CSS Reference
In-Depth Information
Figure 6-5.
IE/Win and this author have differing opinions on where the sidebar should be.
The culprit here is another strange bug in IE, where the margin of floats becomes doubled
(
www.positioniseverything.net/explorer/floatIndent.html
), which can wreak havoc with
pixel-perfect layouts. If not for the existence of a hack, IE would force rethinking the layout, or
changing measurements just to accommodate that browser.
The Hack
As it turns out, the solution also takes advantage of yet another IE rendering oddity: when
a floated element is also set to
display:inline
, IE changes the way that element is rendered
(when it should actually ignore the inline value altogether, which other browsers do correctly).
The result, after applying
display:inline
to the left and right column wrappers (which are
both floated, and both have margins), is a properly behaved IE (Figure 6-6).
