Horizontally centering a fluid DIV?

lister

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

Subscribe Reply

8556

Ben C

On 2007-05-22, lister <li************ @hotmail.comwro te:

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="backgrou nd-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

Steve Castle

On May 22, 9:06 am, lister <listerofsme... @hotmail.comwro te:

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

Similar topics

7238

centering a list with CSS

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 the auto values get set to 0 and there is no centering. The list is generated dynamically, and there is no way to tell in advance how long each item is going to be. Alternatively, is there a good formula to determine with a reasonable...

HTML / CSS

6812

Centering image in div

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 I missing here? Thanks, Aaron P.S. Here are the exact styles I'm using:

HTML / CSS

3915

horizontally centering an absolute positioned div

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 javascript. How I've done it is to have one of the two sets be absolutely positioned. Here is a short version: <html> <body> <script> function toggleAdvanced() {

HTML / CSS

1957

Centering Tables with CSS on Mac IE5

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 suggestions on the net without any luck. I have the code for the whole page below. I've taken out all the Mac specific code that I tried and didn't work. Centering is done by a separate <div> tag. If anyone knows how to get the scroll area to...

HTML / CSS

3063

Centering left-floated items - how? Please help!

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 and the number of them can vary greatly. They are all contained within a parent table cell, which is centred on the page. But I am unable to find a way of centering these table cells within the parent cell.

HTML / CSS

1510

Horizontally centering an image WITH a border

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 the browser window, such that the image will always stay glued to the bottom of the browser window no matter how big it is. Cool. But here's the catch. I'd really like to have a solid, 10px, black border around the whole affair -- you know,...

HTML / CSS

3011

Horizontally centering a DIV (2)

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: http://www.thebunnyshed.co.uk/centertest.htm ps. google screwed up my first post somehow.

HTML / CSS

3778

Problems with 3 column fluid layout - 3rd column wraps

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 the 2nd and 3rd columns fill the remaining space but I've given up on that and am willing to settle for the second row to have a fluid 3-column layout (or something else simple). Anyway, I've developed a page where the second row has this 3...

HTML / CSS

609

Centering Image in <DIV>

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 to the width of the image and centered, or whether is simply fills the width of the container. I've tried various things to achieve this (e.g setting margins to auto) but I'm not having much luck. The URL for the page is: http://www.eminox.es

HTML / CSS

9647

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10104

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8988

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7510

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6744

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5532

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4063

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3668

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2894

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General