Centered div of indeterminate size

KiwiBrian

If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?

Brian Tozer

Spartanicus

"KiwiBrian" <br******@ihug.co.nz> wrote:

If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?

div{display:inline-block}

and text-align{center} on the containing block (not supported by IE and
Mozilla).

--
Spartanicus

Els

KiwiBrian wrote:

If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?

Set the width of the div to auto, and the left and right
margin to equal widths.
For IE5 (and 4) you'll need text-align:center; on the parent
element.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Spartanicus

Els <el*********@tiscali.nl> wrote:

If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?

Set the width of the div to auto

And what do you think this does?

--
Spartanicus

Els

Spartanicus wrote:

"KiwiBrian" <br******@ihug.co.nz> wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?
div{display:inline-block}

and text-align{center}

^^^^^^
Huh?
on the containing block (not supported by IE and
Mozilla).

You mean that inline-block is not supported by IE and Mozilla.
div {text-align:center;} certainly is ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els

Spartanicus wrote:

Els <el*********@tiscali.nl> wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?

Set the width of the div to auto

And what do you think this does?

Have the div shrink and widen with the window.

Ah yes, sorry, that's not what the OP wanted.
Will read better next time...

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Spartanicus

Els <el*********@tiscali.nl> wrote:

Set the width of the div to auto

And what do you think this does?

Have the div shrink and widen with the window.

http://www.w3.org/TR/CSS21/visudet.h...width-property
Initial: auto

--
Spartanicus

Neal

On Mon, 14 Jun 2004 18:51:35 +1200, KiwiBrian <br******@ihug.co.nz> wrote:

If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table
cell
does, how do I code this in CSS?

Brian Tozer

If you do not explicitly set a width, the width will basically be 100% of
the containing block.

div.this {text-align: center;}

will align center all text within. If you want the text to not come close
to the edges, add

margin: auto 10%;

or whatever margin you prefer (in % or em is probably best).

Els

Spartanicus wrote:

Els <el*********@tiscali.nl> wrote:
Set the width of the div to auto

And what do you think this does?

Have the div shrink and widen with the window.

http://www.w3.org/TR/CSS21/visudet.h...width-property
Initial: auto

You won't believe this, but there are people who,
accidentally perhaps, write in their stylesheet:
div{width:100px;}
To help a particular div gain his initial value back, you
can put div.iwantthiscentered{width:auto;}

If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Spartanicus

Els <el*********@tiscali.nl> wrote:

If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups

--
Spartanicus

Els

Spartanicus wrote:

Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups

What's this, nitpicking?

Read the two sentences you just snipped.
Snipping is not _always_ a good thing, Sparty.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Spartanicus

Els <el*********@tiscali.nl> wrote:

If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups

What's this, nitpicking?

Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.

--
Spartanicus

Els

Spartanicus wrote:

Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups

What's this, nitpicking?

Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.

Where did I assume that?
I certainly didn't. The OP said:
"If I want to horizontally center a div on a page"
I said to give it width:auto.
Then you said the initial value is already auto.
Then I said that if someone where to have stated
div{width:100px;} in the stylesheet, it would certainly help
to give width:auto to a particular div.

Now point out where I was wrongly assuming anything?

You know what? I won't respond anymore. Got better things to
do than discuss nothing for no reason.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Spartanicus

Els <el*********@tiscali.nl> wrote:

What's this, nitpicking?
Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.

Where did I assume that?

Here:

>If one would never need to set a div's width to auto, the
>value wouldn't need to be in the specs, would it?

I certainly didn't. The OP said:
"If I want to horizontally center a div on a page"
I said to give it width:auto.
Then you said the initial value is already auto.
Then I said that if someone where to have stated
div{width:100px;} in the stylesheet, it would certainly help
to give width:auto to a particular div.

That assumption was ridiculous to begin with, and helping would be to
point out that in such a case the width:100px should be removed, and not
undone at a (hopefully) later point in the css by changing it to auto.

--
Spartanicus

Els

Spartanicus wrote:

Els <el*********@tiscali.nl> wrote:
What's this, nitpicking?

Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.

Where did I assume that?

Here:
>>If one would never need to set a div's width to auto, the
>>value wouldn't need to be in the specs, would it?

That's the nitpicking part.
I certainly didn't. The OP said:
"If I want to horizontally center a div on a page"
I said to give it width:auto.
Then you said the initial value is already auto.
Then I said that if someone where to have stated
div{width:100px;} in the stylesheet, it would certainly help
to give width:auto to a particular div.

That assumption was ridiculous to begin with, and helping would be to
point out that in such a case the width:100px should be removed, and not
undone at a (hopefully) later point in the css by changing it to auto.

Imagine yourself a page with for whatever reason: 10 divs.
They _all_ are 100px wide. (one reason that springs to mind,
could be that they are holding thumbnails with captions)
Then we need a div with width:auto.
You are saying that assigning a class to each and every
100px wide div is better than
div{width:100px;}
div.special{width:auto;}
??

As for the nitpicking bit: of course you are right, that
that sentence, seperated from the issue in the thread, is
not correct. Well, there's your right, if you want it.
As for never having to set width for a div, I just proved
that that's not always the case, therefore there was no need
for you to explain to me that the initial value of width of
divs (and other stuff too!!!) is auto.

Now I'm tired. Stop it.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Neal

On Mon, 14 Jun 2004 16:44:12 +0100, Spartanicus <me@privacy.net> wrote:

Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups

What's this, nitpicking?

Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.

That is decidedly not what I read in her post.

Spartanicus

Els <el*********@tiscali.nl> wrote:

Imagine yourself a page with for whatever reason: 10 divs.

What does this have to do with the OPs post to which you responded?

--
Spartanicus

Brian

Els wrote:

Set the width of the div to auto

That will create a box equal to the width of the containing block's
content box. If that's the desire, why not just leave width out?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Brian

KiwiBrian wrote:

If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?

div {display: table-cell; margin-left: auto; margin-right: auto}

That's closest to what I think you want. However, it will not work in
IE/Win, which cannot do table-like presentation on non-table elements.
Also, IE/Win 5.x (and IE/Win 6.0 in quirks mode) is screwy when
centering blocks.

For IE, you must specify either a width for the div, or widths for the
margin (which may not be much different for your purposes).

http://dorward.me.uk/www/centre/

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Els

Spartanicus wrote:

Els <el*********@tiscali.nl> wrote:
Imagine yourself a page with for whatever reason: 10 divs.

What does this have to do with the OPs post to which you responded?

Nothing more than the fact that I don't know in what
circumstances the OP is wanting to place the div he asked
about, therefore it doesn't hurt to tell him "width:auto;",
as who knows, maybe it is the eleventh div in his page.
I can't know if not specifying width:auto leaves that div's
width to its initial value.

Compare it to my own standard
"html,body{width:99.5%;height:99.5%;margin:0;paddi ng:0;}"
It's not in the specs, there isn't always the need, but I
just implement it always, taking away problems which might
never arise if I didn't.

Now you will come back again, saying that that's the OP's
responsibility, not mine.
Well, I'll give you your "you're right", because you seem to
want it so badly. I just chose to add some superfluous
(depending on the situation) information, which of course, I
could have clarified more, so that the OP would never by
accident have the words "width:auto" specified in his
stylesheet if not absolutely needed. My choice. Does it hurt
you so much that you are still spending time on this thread?

I've said twice already that I'd stop, this is the third
time. Now I'm bored with it. I quit. Even if you'd bring new
valid or invalid evidence of my wrongdoing. It's done. Over.
Finished. (just this thread ;-) )

Have a nice day, Sparta :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els

Brian wrote:

Els wrote:
Set the width of the div to auto

That will create a box equal to the width of the containing block's
content box. If that's the desire, why not just leave width out?

Yep, I could have left width out. And if I would have read
the OP's question properly in the first place, I would have
given an altogether different solution.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Spartanicus

Brian <us*****@julietremblay.com.invalid> wrote:

div {display: table-cell; margin-left: auto; margin-right: auto}

This should not work in a standard compliant UA, set display to table.
Caveats may apply as the auto generated anonymous css table boxes don't
take certain properties (as demonstrated by your example), best avoided
unless the OP understands css tables (and if IE support is not needed).

--
Spartanicus

Alan J. Flavell

On Tue, 15 Jun 2004, Els wrote:

Spartanicus wrote:

Nothing more than the fact that I don't know in what
circumstances the OP is wanting to place the div he asked
about, therefore it doesn't hurt to tell him "width:auto;",

Eh? You're saying you haven't understood the question (which is
perfectly reasonable in the circumstances) and therefore it doesn't
hurt to give an answer which is quite likely to be irrelevant?

Cue Spock for a comment on that.

Neal

On Tue, 15 Jun 2004 11:03:02 +0100, Alan J. Flavell <fl*****@ph.gla.ac.uk>
wrote:

On Tue, 15 Jun 2004, Els wrote:
Spartanicus wrote:

Nothing more than the fact that I don't know in what
circumstances the OP is wanting to place the div he asked
about, therefore it doesn't hurt to tell him "width:auto;",

Eh? You're saying you haven't understood the question (which is
perfectly reasonable in the circumstances) and therefore it doesn't
hurt to give an answer which is quite likely to be irrelevant?

Cue Spock for a comment on that.

"Fascinating..."

Andrew Urquhart

*Neal* wrote:

*Alan J. Flavell* wrote:
Cue Spock for a comment on that.

"Fascinating..."

QUOTE: 'Fascinating is a word I use for the unexpected. In this case, I
should think "interesting" would suffice.'
--
Andrew Urquhart
- FAQ: www.css.nu/faq/ciwas-aFAQ.html
- Archive: www.tinyurl.com/ysjbm (Google Groups)
- My reply address is invalid, use: www.andrewu.co.uk/contact/

Brian

Spartanicus wrote:

Brian wrote:
div {display: table-cell; margin-left: auto; margin-right: auto}

This should not work in a standard compliant UA, set display to table.

Oops, my apologies. May I ask why "table-cell" display does not work,
but table does?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Spartanicus

Brian <us*****@julietremblay.com.invalid> wrote:

div {display: table-cell; margin-left: auto; margin-right: auto}

This should not work in a standard compliant UA, set display to table.

Oops, my apologies. May I ask why "table-cell" display does not work,
but table does?

A table cell can't have margins, a table can.

--
Spartanicus

Barry Pearson

Spartanicus wrote:

Brian <us*****@julietremblay.com.invalid> wrote:
div {display: table-cell; margin-left: auto; margin-right: auto}

This should not work in a standard compliant UA, set display to
table.

Oops, my apologies. May I ask why "table-cell" display does not work,
but table does?

A table cell can't have margins, a table can.

A table cell can have a margin after applying
td { display: block }
to it. But browser support is limited. (Mozilla & Opera are OK, IE isn't).

It doesn't help this case.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Centered div of indeterminate size

This discussion thread is closed

Similar topics