473,326 Members | 2,108 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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 8537
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Pierre Jelenc | last post by:
Is there a way to center (horizontally) a UL list of unknown width? I can put it in a DIV that's centered with "margin-left: auto; margin-right: auto;" but I then have to specify a width; otherwise...
7
by: Aaron | last post by:
Hi, I have a div with an image inside it. The image needs to be centered in the div. I thought I could do this by setting the image's margin to "auto auto", but it seems to do nothing. What am...
10
by: jlub | last post by:
What I'm trying to do is have two different sets of input elements which occupy the same space on the page, only one of which is visible at a time. You switch between the two with a bit of...
13
by: Raffi | last post by:
Hi, We have an application that requires IE. We recently incorporated CSS scroll areas. The scroll fields are supposed to be centered. They are except for IE5 for the Mac. I have tried various...
2
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated...
2
by: texvanwinkle | last post by:
"WITH a border" being the defining issue. Here's the deal: I'm new to CSS, but I've managed so far to center a single line of links at the top of my home page and center an image on the bottom of...
4
by: lister | last post by:
I am trying to center a DIV horizonally, but I want the DIV fluid so that it is just wide enough to encompass its contents. I've tried margin:auto with no joy :( I've set up a demo here:...
3
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have...
8
by: CJM | last post by:
I've inserted a new banner in an existing page and I want the banner image to be centered (horizontally) within its container. I'm not bothered whether the accompanying line of text is restricted...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.