468,257 Members | 1,381 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,257 developers. It's quick & easy.

Horizontally centering a fluid DIV?

I want to center a fluid DIV horizontally. I've tried making the
margins auto, but this doesn't work.

Can anyone help? CSS drives me nuts!

demo here:
http://www.thebunnyshed.co.uk/centertest.htm

ps. is there a simpler / cleaner way to create the above layout? I do
my best to stay away from DIV soup, but it still ends up horrible :-(

May 22 '07 #1
2 8339
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
May 22 '07 #2
On May 22, 9:06 am, lister <listerofsme...@hotmail.comwrote:
I want to center a fluid DIV horizontally. I've tried making the
margins auto, but this doesn't work.

Can anyone help? CSS drives me nuts!

demo here:http://www.thebunnyshed.co.uk/centertest.htm

ps. is there a simpler / cleaner way to create the above layout? I do
my best to stay away from DIV soup, but it still ends up horrible :-(
The expanded way to do it is:
margin-left:auto;
margin-right:auto;

-Steve

May 22 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Pierre Jelenc | last post: by
7 posts views Thread by Aaron | last post: by
13 posts views Thread by Raffi | last post: by
4 posts views Thread by lister | last post: by
8 posts views Thread by CJM | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.