I've been looking for a way to do shrink to wrap block level element
centering reliably in all modern browsers, including IE. Here is the
solution I came up with. I have tried it in IE 5 and 6, Firefox 1.0.4 and
Opera 8 (all under Windows).
Demo page: http://24.80.239.218:5190/web/center/arbitrary.html (be gentle,
residental cable)
Extract of meaty stuff:
<div class="outer"><div class="inner">
Any block level content can go here (including floats)
</div></div>
div.inner { display: table; margin: 0 auto; }
<!--[if lt IE 7]> <style type="text/css"> /* I have a dream */
div.outer { position: relative; right: 50%; float: right; }
div.inner { position: relative; left: 50%; float: left; }
</style> <![endif]-->
A short explanation is in order. Decent browsers get display: table and
automargin centering, as described in
http://css-discuss.incutio.com/?page=CenteringBlockElement
IE gets the job done via two wrappers. They are both floated to ensure
shrinkwrapping.
Outer one is floated right, and then shifted by 50% to the left. As a
result, right edge of outer wrapper goes over center line of container.
Now, we shift inner wrapper in opposite direction also by 50%, and that
pits its center line right over center line of original container. Sounds
confusing, but is easy to see if borders are enabled on those wrappers.
Known side effect: content after the centered element has to be cleared
(as outer and inner are floats for IE)
So, does this actually work for you, or I missed something obvious? Do I
get a big chocolate medal, or someone came up with this before? (if they
did, I can blame Wiki, though)
Roman.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
