By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Need help with layout

P: n/a
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
Feb 4 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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
Feb 4 '07 #2

P: n/a
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?
Feb 4 '07 #3

P: n/a
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
Feb 4 '07 #4

P: n/a
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.
Feb 4 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.