Horizontally centering a DIV (2)

[lister]

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.

[biff]

lister wrote:

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.

You have left-margin:auto and right-margin:auto instead of margin-left:
auto and margin-right:auto ... you also need to set a width or the div
you are using for a container will take up the width of the entire outer
container....this worked for me:

<div style=" width:30em; margin-left:auto; margin-right:auto;
background-color:yellow; ">

--
biff

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

biff wrote :

lister wrote:

>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.

you also need to set a width

The OP wants the div to stretch laterally, to expand horizontally to
fit/meet the width of its inline content ("just wide enough to encompass
its contents"). So, inline-block has to be a serious option here.

"inline-block
This value causes an element to generate a block box, which itself
is flowed as a single inline box, similar to a replaced element. The
inside of an inline-block is formatted as a block box, and the element
itself is formatted as an inline replaced element."
http://www.w3.org/TR/CSS21/visuren.html#propdef-display

or the div

you are using for a container will take up the width of the entire outer
container....

I believe his best chance is to use

div {display: inline-block; display: -moz-inline-block; margin-left:
auto; margin-right: auto;}

Not tested.

Gérard
--
Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs...your_Web_Pages

[Ben C]

On 2007-05-23, Gérard Talbot <ne***********@gtalbot.orgwrote:

biff wrote :

>lister wrote:

>>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.

you also need to set a width

The OP wants the div to stretch laterally, to expand horizontally to
fit/meet the width of its inline content ("just wide enough to encompass
its contents"). So, inline-block has to be a serious option here.

"inline-block
This value causes an element to generate a block box, which itself
is flowed as a single inline box, similar to a replaced element. The
inside of an inline-block is formatted as a block box, and the element
itself is formatted as an inline replaced element."
http://www.w3.org/TR/CSS21/visuren.html#propdef-display

or the div

>you are using for a container will take up the width of the entire outer
container....

I believe his best chance is to use

div {display: inline-block; display: -moz-inline-block; margin-left:
auto; margin-right: auto;}

Inline-block is the best way to do this, or would be if it were
supported by more browsers. But the way to centre it is not with auto
margins, but with text-align: center on the container.

See CSS 2.1 10.3.9-- auto left and right margins on inline blocks are
treated as zero. You only get that centering behaviour with block boxes.

Inline blocks are like inlines from the point of view of their
container, but like blocks from the point of view of their descendents.

So you center them like inlines, with text-align: center on their
container, rather than like blocks, which you centre with auto margins.

e.g.

body { text-align: center; }
div
{
display: inline-block;
display: -moz-inline-box; /* seems to work here */
border: 2px solid green;
}

<body>
<div>hello</div>
</body>

works in Opera.

The problem with inline-block is that IE (I heard) doesn't do the one
feature you need here, which is shrink-to-fit width. I don't know about
-moz-inline-box (it's -moz-inline-box, not -moz-inline-block) but it
seems to work OK in this example.

[=?UTF-8?B?R8OpcmFyZCBUYWxib3Q=?=]

Ben C wrote :

>div {display: inline-block; display: -moz-inline-block; margin-left:
auto; margin-right: auto;}

Inline-block is the best way to do this, or would be if it were
supported by more browsers. But the way to centre it is not with auto
margins, but with text-align: center on the container.

You're right.

See CSS 2.1 10.3.9-- auto left and right margins on inline blocks are
treated as zero. You only get that centering behaviour with block boxes.

Inline blocks are like inlines from the point of view of their
container, but like blocks from the point of view of their descendents.

Correct!

So you center them like inlines, with text-align: center on their
container, rather than like blocks, which you centre with auto margins.

e.g.

body { text-align: center; }
div
{
display: inline-block;
display: -moz-inline-box; /* seems to work here */
border: 2px solid green;
}

<body>
<div>hello</div>
</body>

works in Opera.

The problem with inline-block is that IE (I heard) doesn't do the one
feature you need here, which is shrink-to-fit width. I don't know about
-moz-inline-box (it's -moz-inline-box, not -moz-inline-block)

Yes again! Great post from you, Ben :)

but it
seems to work OK in this example.

Gérard
--
Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs...your_Web_Pages