centering float left

[Jeff Thies]

I have a series of blocks that are float left that I need centered on
the page.

<div class="center" align="center">

<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

..center{margin: auto}
..center{text-align: center}

How do I center the class center div?

I'm not a big fan of centering stuff but I'm just a programmer, not a
designer.

Jeff

[Els]

Jeff Thies wrote:

I have a series of blocks that are float left that I need centered on
the page.

<div class="center" align="center">

<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

.center{margin: auto}
.center{text-align: center}

How do I center the class center div?

You need to specify a width on that center div :-)
IIRC (anyone, please correct me if I'm wrong) the
text-align: center is needed for IE5, while the margin:auto
is there for the newer browsers.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[Nick Theodorakis]

On Sat, 13 Sep 2003 13:13:28 +0200, Els
<el*********@PLEASEtiscali.nl.invalid> wrote:

Jeff Thies wrote:

I have a series of blocks that are float left that I need centered on
the page.

<div class="center" align="center">

<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

.center{margin: auto}
.center{text-align: center}

How do I center the class center div?

You need to specify a width on that center div :-)
IIRC (anyone, please correct me if I'm wrong) the
text-align: center is needed for IE5, while the margin:auto
is there for the newer browsers.

IMO the easist thing is to do with the outer <div> is to center it by
explicitly setting the widths of the left and right margins, eg:

..center
{
margin-left: 10%;
margin-right: 10%;
}

and that should work even with IE5 as well (heck, it even works in NS4
if you don't try to get too fancy).

Nick

--
Nick Theodorakis
ni******************@urmc.rochester.edu

[Nikolaos Giannopoulos]

Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.

text-align: center when applied to a block will center all elements
contained in the block e.g. to center an img wrap it in a div and apply
text-align: center to the div.

http://www.w3.org/TR/CSS1#text-align

margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting

--Nikolaos

[Alan J. Flavell]

On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:

Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.

You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate
the text-centering effect inside of whatever block element it is that
you're centering, otherwise all your content would get centered.

For more detailed discussion I'd suggest
http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS

Google also found this treatise on the topic:
http://theodorakis.net/blockcenter.html

[...] margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting

In theory, yes, but that only works on conforming WWW browsers.

[Nikolaos Giannopoulos]

Alan J. Flavell wrote:

On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:

Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.

You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate

You mean Els is....

In re-reading Els reply I realize that he made the above statement in
the context of the *DIV* tag and more specifically as a an IE5 work
around *only*.

That [his remark was solely for DIV's] isn't totally clear from his
statement and that is why I replied - as there is a distinction based on
what the author is trying to center.

--Nikolaos

[Els]

Alan J. Flavell wrote:

On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:

Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.
You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate
the text-centering effect inside of whatever block element it is that
you're centering, otherwise all your content would get centered.
I knew it was a bug, but didn't realise the workaround was
relying on yet another bug :-(
The text-centering effect inside does bug me sometimes, but
I manage to make a construction of divs to help
left-aligning parts of the content.
For more detailed discussion I'd suggest
http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS

Google also found this treatise on the topic:
http://theodorakis.net/blockcenter.html

Thanks, I bookmarked those pages. I do manage to get my
pages the way I want in most browsers, including IE5.5 and
IE for Mac, but I should study this stuff some more to not
spend so much time working it out every time again :-)
margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting

In theory, yes, but that only works on conforming WWW browsers.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[Els]

Nikolaos Giannopoulos wrote:

In re-reading Els reply I realize that he made .....

That [his remark ..... his statement .....

I'm not a 'he'.... ;-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[Brian]

Nikolaos Giannopoulos wrote:

text-align: center when applied to a block will center all elements
contained in the block e.g. to center an img wrap it in a div and
apply text-align: center to the div.

Just so that the op is clear:

text-align: center when applied to a block level element will center
all elements contained in it *in MSIE/Win only*[1]. In conforming
browsers, text-align: center will center only inline content in a block.

div {text-align: center; border: thin solid black }
p {border: thin solid green }
p.narrow {width: 12em; border: thin solid blue }

<div>

this text is centered within the div

<p>
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>

<p class="narrow">
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>

</div>

[1]I don't have MSIE 6, and am not sure about its behavior. I think
in standards mode, it behaves like Mozilla and Opera on this matter,
but in quirks mode it emulates the bugs of MSIE 5.x/Win. Also, there
are other older browsers that may also suffer from this bug.

--
Brian
follow the directions in my address to email me

[Alan J. Flavell]

On Sat, Sep 13, Els inscribed on the eternal scroll:

I knew it was a bug, but didn't realise the workaround was
relying on yet another bug :-(

It's OK, I would do the same myself ;-)

I sure wouldn't rely on a bug to get some effect I wanted, but I'm
quite happy to exploit a bug which compensates for some other bug, as
long as it does no harm for conforming browsers (..and other user
agents, I should say).

[Nikolaos Giannopoulos]

Els wrote:

I'm not a 'he'.... ;-)

Sorry ;-)

--Nikolaos

[Els]

Nikolaos Giannopoulos wrote:

Els wrote:

I'm not a 'he'.... ;-)

Sorry ;-)

I won't hold it against you ;-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.