Need help with layout

[Ted Hopp]

I'm trying to create the following layout and would appreciate help.

+----------------+
| header | variable height
+------+---------+
| | stuff | 150 pixels, content variable height & centered vertically
| +---+---------+
| | more |
| | |
+--+-------------+
| footer |
+----------------+

Also, the area to the left of 'stuff' and 'more' will have a background
image that visually wraps around the top left corner of 'more'.

The vertical centering inside 'stuff' is a standard problem, I think. The
only (cross-browser) approaches I know are to either use tables (yuck) or
nest a div or two using display:table and display:table-cell (yuck again).

I think I can do it by enclosing each of 'stuff' and 'more' in a full-width
div with left padding, fixing the height for the div containing 'stuff', and
displaying the background image in both enclosing divs. But this seems kind
of ugly. Is there a better way?

TIA

Ted Hopp

[dorayme]

In article <Nv******************************@rcn.net>,
"Ted Hopp" <te*@zigzagworld.comwrote:

I'm trying to create the following layout and would appreciate help.

+----------------+
| header | variable height
+------+---------+
| | stuff | 150 pixels, content variable height & centered vertically
| +---+---------+
| | more |
| | |
+--+-------------+
| footer |
+----------------+

Also, the area to the left of 'stuff' and 'more' will have a background
image that visually wraps around the top left corner of 'more'.

The vertical centering inside 'stuff' is a standard problem, I think. The
only (cross-browser) approaches I know are to either use tables (yuck) or
nest a div or two using display:table and display:table-cell (yuck again).

I think I can do it by enclosing each of 'stuff' and 'more' in a full-width
div with left padding, fixing the height for the div containing 'stuff', and
displaying the background image in both enclosing divs. But this seems kind
of ugly. Is there a better way?

TIA

Ted Hopp

Why don't you show us your best shot and we go from there. URL

--
dorayme

[Ben C]

On 2007-02-04, Ted Hopp <te*@zigzagworld.comwrote:

I'm trying to create the following layout and would appreciate help.

+----------------+
| header | variable height
+------+---------+
| | stuff | 150 pixels, content variable height & centered vertically
| +---+---------+
| | more |
| | |
+--+-------------+
| footer |
+----------------+

Also, the area to the left of 'stuff' and 'more' will have a background
image that visually wraps around the top left corner of 'more'.

The vertical centering inside 'stuff' is a standard problem, I think. The
only (cross-browser) approaches I know are to either use tables (yuck) or
nest a div or two using display:table and display:table-cell (yuck again).

Right, I think those are basically your cross-browser options.

I thought Spartanicus had a good page about vertical centering, but I
couldn't find it.

Bottom line is that vertical centering of a little auto-height block of
text requires inline-block or table. If the height's not auto there are
more options.

I think I can do it by enclosing each of 'stuff' and 'more' in a full-width
div with left padding, fixing the height for the div containing 'stuff', and
displaying the background image in both enclosing divs. But this seems kind
of ugly. Is there a better way?

Perhaps I haven't understood what you're doing, but why not put the
background image on the common parent of stuff and more, and give stuff
and more either transparent background or left margins (instead of
padding) or both?

[Spartanicus]

Ben C <sp******@spam.eggswrote:

>I thought Spartanicus had a good page about vertical centering, but I
couldn't find it.

Lauri Raittila http://www.student.oulu.fi/~laurirai/www/css/middle/

--
Spartanicus

[Ben C]

On 2007-02-04, Spartanicus <in*****@invalid.invalidwrote:

Ben C <sp******@spam.eggswrote:

>>I thought Spartanicus had a good page about vertical centering, but I
couldn't find it.

Lauri Raittila http://www.student.oulu.fi/~laurirai/www/css/middle/

Thanks, that was the page I was thinking of.