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]

Re: centering float left

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

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]

Re: centering float left

On Sat, 13 Sep 2003 13:13:28 +0200, Els
<els.aNOSPAM@PL EASEtiscali.nl. invalid> wrote:
[color=blue]
>Jeff Thies wrote:
>[color=green]
>> 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?[/color]
>
>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.[/color]

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_theodo rakis@urmc.roch ester.edu

[Nikolaos Giannopoulos]

Re: centering float left

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

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]

Re: centering float left

On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
[color=blue]
> Els wrote:[color=green]
> >
> > 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.[/color][/color]

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/wiki.pl?Center_with_CSS

Google also found this treatise on the topic:

http://theodorakis.net/blockcenter.html

[...][color=blue]
> margin: auto is used to center block level elements themselves.
>
> http://www.w3.org/TR/CSS1#horizontal-formatting[/color]

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

[Nikolaos Giannopoulos]

Re: centering float left

Alan J. Flavell wrote:[color=blue]
> On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
>[color=green]
>>Els wrote:
>>[color=darkred]
>>>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.[/color][/color]
>
> 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[/color]

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]

Re: centering float left

Alan J. Flavell wrote:
[color=blue]
> On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
>
>[color=green]
>>Els wrote:
>>[color=darkred]
>>>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.[/color][/color]
>
> 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.[/color]

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.
[color=blue]
> 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[/color]

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 :-)
[color=blue][color=green]
>>margin: auto is used to center block level elements themselves.
>>
>>http://www.w3.org/TR/CSS1#horizontal-formatting[/color]
>
> In theory, yes, but that only works on conforming WWW browsers.[/color]

--
Els

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

[Els]

Re: centering float left

Nikolaos Giannopoulos wrote:
[color=blue]
> In re-reading Els reply I realize that he made .....
>
> That [his remark ..... his statement .....[/color]

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

--
Els

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

[Brian]

Re: centering float left

Nikolaos Giannopoulos wrote:[color=blue]
>
> 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.[/color]

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]

Re: centering float left

On Sat, Sep 13, Els inscribed on the eternal scroll:
[color=blue]
> I knew it was a bug, but didn't realise the workaround was
> relying on yet another bug :-([/color]

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]

Re: centering float left

Els wrote:[color=blue]
>
> I'm not a 'he'.... ;-)[/color]

Sorry ;-)

--Nikolaos

[Els]

Re: centering float left

Nikolaos Giannopoulos wrote:
[color=blue]
> Els wrote:
>[color=green]
>> I'm not a 'he'.... ;-)[/color]
>
> Sorry ;-)[/color]

I won't hold it against you ;-)

--
Els

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