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]

Re: Centered div of indeterminate size

"KiwiBrian" <briantoz@ihug. co.nz> wrote:
[color=blue]
>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?[/color]

div{display:inl ine-block}

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

--
Spartanicus

[Els]

Re: Centered div of indeterminate size

KiwiBrian wrote:
[color=blue]
> 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?[/color]

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]

Re: Centered div of indeterminate size

Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue][color=green]
>> 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?[/color]
>
>Set the width of the div to auto[/color]

And what do you think this does?

--
Spartanicus

[Els]

Re: Centered div of indeterminate size

Spartanicus wrote:
[color=blue]
> "KiwiBrian" <briantoz@ihug. co.nz> wrote:
>[color=green]
>>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?[/color]
>
> div{display:inl ine-block}
>
> and text-align{center}[/color]
^^^^^^
Huh?
[color=blue]
> on the containing block (not supported by IE and
> Mozilla).[/color]

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]

Re: Centered div of indeterminate size

Spartanicus wrote:
[color=blue]
> Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green][color=darkred]
>>>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?[/color]
>>
>>Set the width of the div to auto[/color]
>
> And what do you think this does?[/color]

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]

Re: Centered div of indeterminate size

Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue][color=green][color=darkred]
>>>Set the width of the div to auto[/color]
>>
>> And what do you think this does?[/color]
>
>Have the div shrink and widen with the window.[/color]

http://www.w3.org/TR/CSS21/visudet.html#the-width-property

Initial: auto

--
Spartanicus

[Neal]

Re: Centered div of indeterminate size

On Mon, 14 Jun 2004 18:51:35 +1200, KiwiBrian <briantoz@ihug. co.nz> wrote:
[color=blue]
> 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
>
>[/color]

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]

Re: Centered div of indeterminate size

Spartanicus wrote:[color=blue]
> Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green][color=darkred]
>>>>Set the width of the div to auto
>>>
>>>And what do you think this does?[/color]
>>
>>Have the div shrink and widen with the window.[/color]
>
> http://www.w3.org/TR/CSS21/visudet.h...width-property
> Initial: auto[/color]

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.iwantthisce ntered{width:au to;}

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]

Re: Centered div of indeterminate size

Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
>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?[/color]

http://www.w3.org/TR/CSS21/visudet.html#the-width-property

Applies to: all elements but non-replaced inline elements, table rows,
and row groups

--
Spartanicus

[Els]

Re: Centered div of indeterminate size

Spartanicus wrote:
[color=blue]
> Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green]
>>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?[/color]
>
> http://www.w3.org/TR/CSS21/visudet.h...width-property
> Applies to: all elements but non-replaced inline elements, table rows,
> and row groups[/color]

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]

Re: Centered div of indeterminate size

Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue][color=green][color=darkred]
>>>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?[/color]
>>
>> http://www.w3.org/TR/CSS21/visudet.h...width-property
>> Applies to: all elements but non-replaced inline elements, table rows,
>> and row groups[/color]
>
>What's this, nitpicking?[/color]

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

--
Spartanicus

[Els]

Re: Centered div of indeterminate size

Spartanicus wrote:
[color=blue]
> Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green][color=darkred]
>>>>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[/color]
>>
>>What's this, nitpicking?[/color]
>
> Pointing out that your assumption that the width property and it's
> values only apply to div's is a false one.[/color]

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]

Re: Centered div of indeterminate size

Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue][color=green][color=darkred]
>>>What's this, nitpicking?[/color]
>>
>> Pointing out that your assumption that the width property and it's
>> values only apply to div's is a false one.[/color]
>
>Where did I assume that?[/color]

Here:
[color=blue][color=green][color=darkred]
>>>>>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?[/color][/color][/color]
[color=blue]
>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:100p x;} in the stylesheet, it would certainly help
>to give width:auto to a particular div.[/color]

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]

Re: Centered div of indeterminate size

Spartanicus wrote:
[color=blue]
> Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green][color=darkred]
>>>>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.[/color]
>>
>>Where did I assume that?[/color]
>
> Here:
>[color=green][color=darkred]
>>>>>>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?[/color][/color][/color]

That's the nitpicking part.
[color=blue][color=green]
>>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:100 px;} in the stylesheet, it would certainly help
>>to give width:auto to a particular div.[/color]
>
> 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.[/color]

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{wid th: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 -