On 2007-05-22, lister <li************@hotmail.comwrote:
I want to center a fluid DIV horizontally. I've tried making the
margins auto, but this doesn't work.
That's because the width is also auto, and auto width for a normal block
box like that occupies the entire available width.
If you want a width determined by content, which I assume is what you
mean by "fluid", you will need:
<div style="background-color: yellow; display: table; margin: 0 auto;">
Problem is I heard this doesn't work on IE.
An alternative is display: inline-block, but that doesn't work on
Firefox, or IE in this case (since you need a shrink-to-fit
inline-block).
If you don't really need the yellow background, you could leave the
images as inline (perhaps giving them vertical-align:top) and put
text-align: center on the div that is now yellow.
Or just use a real table instead of display: table.
Can anyone help? CSS drives me nuts!
demo here:
http://www.thebunnyshed.co.uk/centertest.htm