Stylesheets - CSS Challenge: center a div like a table

Author

CSS Challenge: center a div like a table

donovan

2007-04-18, 6:16 am

OK, so I know that there has been a lot of discussion on this topic,
but none of the answers have been satisfactory. Therefore there
seems to be only one thing to do: issue a challenge to all of the CSS
gurus of the world to prove that CSS really can do what it claims to
do.

The challenge seems simple as first blush. We take a simple case of
table-based layout:

<table align="center" cellpadding="4">
<td bgcolor="yellow">
Some stuff
</td>
</table>

This simply prints "Some stuff" centered, with a yellow background.
All we want to do is recreate this example using CSS.

No problem, right?

Just to be clear, there are a few requirements:

* The text area (and its background) must automatically resize to fit
the size of the text. In other words, no div's of predefined width.

* It must be possible to put this inside another div and have the text
centered within the space of the parent div. Any surrounding content
should flow in a normal and predictable fashion, just like the
original table-based layout. In other words, no floating divs.

* The background must extend a few pixels beyond the text. In other
words no embedding a span inside a div.

* The contained text ("Some stuff") might be multiple lines or contain
additional markup. The solution must be able to accommodate this.
Like I said, a span inside a div ain't gonna cut it.

* The solution must work on all mainstream modern browsers. At a
minimum this means FireFox 1.0+, Opera 8+ and Safari. Oh and that
other one... what was it... oh yeah, IE 6.0+ (5.0+ would be nice, I'd
live with 6.0). There go some more possible solutions, like display:
table-cell.

* The solution should validate to W3C standard xhtml and CSS. Note
that I said "should" and not "must." I'm purist until purity fails to
get the job done.

So, are you up to the challenge?

I'm pretty close to convinced that it can't be done. Someone please
prove me wrong.

andrew

2007-04-18, 6:16 am

On 17 Apr 2007 20:50:26 -0700
donovan <dpeastman@XXXXXXXXXX> wrote:

[....]

Therefore there
> seems to be only one thing to do: issue a challenge to all of the
> CSS gurus of the world to prove that CSS really can do what it
> claims to do.
>
> The challenge seems simple as first blush.

[....]
>
> So, are you up to the challenge?

Hmmmmm.... is there a prize for this amazing test of skill?

Andrew

--
Andrew's Corner
http://people.aapt.net.au/~adjlstrong/

Ben C

2007-04-18, 6:16 am

On 2007-04-18, donovan <dpeastman@XXXXXXXXXX> wrote:
> OK, so I know that there has been a lot of discussion on this topic,
> but none of the answers have been satisfactory. Therefore there
> seems to be only one thing to do: issue a challenge to all of the CSS
> gurus of the world to prove that CSS really can do what it claims to
> do.
>
> The challenge seems simple as first blush. We take a simple case of
> table-based layout:
>
><table align="center" cellpadding="4">
><td bgcolor="yellow">
> Some stuff
></td>
></table>
>
> This simply prints "Some stuff" centered, with a yellow background.
> All we want to do is recreate this example using CSS.
>
> No problem, right?
>
> Just to be clear, there are a few requirements:
>
> * The text area (and its background) must automatically resize to fit
> the size of the text. In other words, no div's of predefined width.
>
> * It must be possible to put this inside another div and have the text
> centered within the space of the parent div. Any surrounding content
> should flow in a normal and predictable fashion, just like the
> original table-based layout. In other words, no floating divs.
>
> * The background must extend a few pixels beyond the text. In other
> words no embedding a span inside a div.
>
> * The contained text ("Some stuff") might be multiple lines or contain
> additional markup. The solution must be able to accommodate this.
> Like I said, a span inside a div ain't gonna cut it.
>
> * The solution must work on all mainstream modern browsers. At a
> minimum this means FireFox 1.0+, Opera 8+ and Safari. Oh and that
> other one... what was it... oh yeah, IE 6.0+ (5.0+ would be nice, I'd
> live with 6.0). There go some more possible solutions, like display:
> table-cell.
>
> * The solution should validate to W3C standard xhtml and CSS. Note
> that I said "should" and not "must." I'm purist until purity fails to
> get the job done.
>
>
> So, are you up to the challenge?
>
> I'm pretty close to convinced that it can't be done. Someone please
> prove me wrong.

Can't be done in a way that works in all those browsers you mentioned.

In an ideal world, the preferred solution would be display: inline-block
with text-align: center on the container.