[ToolmakerSteve.com banner TBD]
Centering of UL + Floated LIs, Using CSS
- One
- Two Long With Spaces
- Three Okay
With some work, it is possible to center anything using CSS -- even in Internet
Explorer, Version 6. No need to specify
dimensions of the inner box. This demonstrates all the features that I am aware
might be an issue. It is the hardest case: a floated sequence of sub-elements,
and a color shrink-wrapped to the main element. The css is a bit involved, and
must be done just right. Equally annoying, the HTML had to contain several
"wrapper" <div>s, plus an "endfloats" element. Don't know if there are still
glitches in browsers other than IE 6 and Firefox. [TBD: Test in IE 7 and Firefox
2 and on a Mac.]
The good news is that this works for anything: you could make a template of the
wrappers and a reference to the CSS, and then use this without change wherever
it is needed. (Or just copy this web page, and delete the Html you don't need.)
Or you could do what I do: just use a
table!
VERSION: checking that this works when wrapped around sequence of floated divs
(LI's in a UL).
SHRINK WRAP COLOR: set background of "inner", not of "ul",
to the desired "shrink-wrap color" (e.g. the background color for a link bar).
IMPL NOTE: had to add an extra "inner" div with "endfloats" as last item,
to see height of divs on valid-CSS; then needed 2nd "endfloats"
before-hand to balance top/bottom padding heights on IE.
(IDEA: could try to get the "endfloats" inside the UL. But then it would have to
be a special li --
confusing HTML & tricky to describe in CSS.)