centering float left

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

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.

On Sat, 13 Sep 2003 13:13:28 +0200, Els
<els.aNOSPAM (AT) PLEASEtiscali (DOT) 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
nicholas_theodorakis (AT) urmc (DOT) rochester.edu

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

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.

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

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.

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.

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