How to place vertically centered elements side by side?

[Terry]

Trying my hand at table-less design. Looking for an XHTML 1.0 strict,
CSS2 compliant solution. Here's the result I'm looking for:

Div I: Some header text
DIV II: Some text and a form which should be vertically centered
Div III: Rest of content

DIV II is the one I cannot resolve. It should span the whole page
width, no matter the size of its content. 'Text A' should be aligned
to the left, 'Form B' should be aligned to the right but both should
be vertically aligned in the middle.

Table-less layout advocates, here's your chance to make a convert :)
Any suggestions/pointers appreciated.
+============== =============== =============== =============== =========+
| Div I |
| |
+--------------------------------------------------------------------+
| Div II |
| |
| ............... ...... |
| ............... ...... : : |
| : Text A : : Form B : |
| ............... ...... : : |
| ............... ...... |
| |
| |
+--------------------------------------------------------------------+
| Div III |
| |
| |
| text text text text text text text text text text text |
| text text text text text text text text text text text |
| text text text text text text text text text text text |
| text text text text text text text text text text text |
| text text text text text text text text text text text |
| text text text text text text text text text text text |
| text text text text text text text text text text text |
| |
| |
+============== =============== =============== =============== =========+

[Brian]

Terry wrote:

Looking for an XHTML 1.0 strict,
Don't. Use HTML 4.01 strict unless you have specialized needs that call
for XHTML.
Here's the result I'm looking for:

Div I: Some header text
Default static position for that.
DIV II: Some text and a form which should be vertically centered
This is not trivial. You'd have a fighting chance if IE/Win supported
display: table-cell. Alas, it doesn't. Why do you want this? It looks to
me like you can put a healthy padding-top and padding-bottom, and float
Text A left with it a suitable width (in flexible units, naturally). It
won't be centered vertically in Div II, but it will come close to what
you want.
Div III: Rest of content
Clear the 3rd div, and you're done, I think.
DIV II is the one I cannot resolve.
Yeah, that's the tricky one. Google this group for vertical-align center
and see what has come up about this before. (There'll be *lots* of hits.)
Table-less layout advocates, here's your chance to make a convert :)

You'll forgive me for being blunt, but I don't really feel obligated to
convert you. If you want to learn something about tableless layout,
you've come to the right place. But if you seek conversion, you might
want to look for a www cult. I hear there are certain secret www arts
taught in Redmond, if that's your thing.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Terry]

Hi Brian,

Thanks for your suggestions, I'll keep them in mind. Sorry about my
'convert' comment -- it was made more out of frustration than anything
else... Seems like table-less is all the rage and I keep hearing that
this is 'How It Should Be Done' -- but then I come up with a relatively
common scenario and then, all I get are responses telling me 'why do you
need this' and 'sorry no can do, but try this -- it's close!"

I really appreciate the effort to help but I'm getting more and more
convinced that table-less design is best suited for really simple
layouts and that anything fancy will have to be done with tables.
Granted, this has much more to do with sucky browser support than with
CSS itself :(

Thanks,

Original :: Brian :: 2004-08-15 22:24

DIV II: Some text and a form which should be vertically centered

This is not trivial. You'd have a fighting chance if IE/Win supported
display: table-cell. Alas, it doesn't. Why do you want this? It looks to
me like you can put a healthy padding-top and padding-bottom, and float
Text A left with it a suitable width (in flexible units, naturally). It
won't be centered vertically in Div II, but it will come close to what
you want.

Table-less layout advocates, here's your chance to make a convert :)

You'll forgive me for being blunt, but I don't really feel obligated to
convert you. If you want to learn something about tableless layout,
you've come to the right place. But if you seek conversion, you might
want to look for a www cult. I hear there are certain secret www arts
taught in Redmond, if that's your thing.

[Peter Mount]

Hi

I suppose if you were really desperate you could try using frames on
your page. One frame on top, one on the bottom and one in the middle.
The frames on top and bottom would be a set distance while the frame in
the middle would be set to a percentage. At least that's how I remember
doing it once to get a graphic appear at the center of a page.

Having said that I remember one of my teachers last year saying that
framed pages are only really suitable to web sites with a small number
of pages, where bookmarking isn't such an issue. I did actually see one
site that explained how to get around the bookmarking problem with
frames but I can't remember what I did with the link.

Tables do still have a place as long as you don't make them overly
complicated. There is a good tutorial on tables at
http://webmonkey.wired.com/webmonkey...l?tw=authoring

It's an old tutorial but it's still relevant in that it talks about
making tables with less code and thereby reducing download times. After
that you can do a google on css tables.

Have a good day

Peter Mount
in**@petermount .au.com

Terry wrote:

Hi Brian,

Thanks for your suggestions, I'll keep them in mind. Sorry about my
'convert' comment -- it was made more out of frustration than anything
else... Seems like table-less is all the rage and I keep hearing that
this is 'How It Should Be Done' -- but then I come up with a relatively
common scenario and then, all I get are responses telling me 'why do you
need this' and 'sorry no can do, but try this -- it's close!"

I really appreciate the effort to help but I'm getting more and more
convinced that table-less design is best suited for really simple
layouts and that anything fancy will have to be done with tables.
Granted, this has much more to do with sucky browser support than with
CSS itself :(

Thanks,

Original :: Brian :: 2004-08-15 22:24

DIV II: Some text and a form which should be vertically centered

This is not trivial. You'd have a fighting chance if IE/Win supported
display: table-cell. Alas, it doesn't. Why do you want this? It looks to
me like you can put a healthy padding-top and padding-bottom, and float
Text A left with it a suitable width (in flexible units, naturally).
It won't be centered vertically in Div II, but it will come close to
what you want.

Table-less layout advocates, here's your chance to make a convert :)

You'll forgive me for being blunt, but I don't really feel obligated to
convert you. If you want to learn something about tableless layout,
you've come to the right place. But if you seek conversion, you might
want to look for a www cult. I hear there are certain secret www arts
taught in Redmond, if that's your thing.

[Brian]

How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

Terry wrote:

Seems like table-less is all the rage and I keep hearing that this is
'How It Should Be Done'
It has advantages over the old nested table stuff; many of those
advantages are for the *visitor* to the site, and that's important to
keep in mind. Too often authors think only about their design needs,
forgetting the audience in the process.
then I come up with a relatively common scenario
Using old techniques, right? If you want to give this a go, and you have
a bit of time so spend learning, then start with no layout at all.
Create a few documents with navigation and content, using strict markup
(HTML 4.01 strict is probably the right choice). Forget about the
visuals. When you've got a fully functional site, start in on the CSS,
trying different color schemes and layout ideas.

If you try to redo table layouts, you'll be frustrated and disappointed.
and then, all I get are responses telling me 'why do you need this'
and 'sorry no can do, but try this -- it's close!"
That's as much an aknowledgement of the realities of the www as anything
else. The more you try to force your layout, the worse it breaks in
unanticipated situations. The nice thing about CSS is the power it gives
you to offer a rich visual appearance with a high degree of flexibility.
Old methods gave you the visuals, but took away flexibility.
I'm getting more and more convinced that table-less design is best
suited for really simple layouts and that anything fancy will have to
be done with tables.

Have a look here:

http://www.csszengarden.com/

NB: I don't recommend copying their techniques unless you know what
you're doing. Too many of their designs are, in fact, brittle or hostile
to user needs (what's with the small font sizes?). But it should at
least disabuse you of the notion that CSS can't do anything interesting.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[jmm-list-gn]

Brian wrote:

It has advantages over the old nested table stuff; many of those
advantages are for the *visitor* to the site, and that's important to
keep in mind. Too often authors think only about their design needs,
forgetting the audience in the process.

What are some of those advantages?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Brian]

jmm-list-gn wrote:

Brian wrote:

It has advantages over the old nested table stuff; many of those
advantages are for the *visitor* to the site

What are some of those advantages?

To speak only about a layout using nested tables v. css:

CSS can be changed by the user with not too much effort, or turned off
completely. Both Opera and Mozilla (via dev toolbar) provide many ways
to alter a document, in small or big ways.

Browsers must often make two passes to show a table; the first to figure
out how much space is needed for different columns and rows, the second
to actually put it in the space. If you use nested tables, it must do
the same thing for each nested table, then continue with the parent
table. Using proper markup with css lets you avoid this. Additionally,
the markup is also leaner. Nested table layouts usually come with spacer
gifs. Using margins and padding means less bytes, and less hits.

That's 2 advantages. Do I need a third? :-)

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[jmm-list-gn]

Brian wrote:

[...]

That's 2 advantages. Do I need a third? :-)

No, thanks, that'll do. I've been replacing tables with divs on our
site where I can. Now I have even more motivation. :-)

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Lauri Raittila]

Terry wrote:

Trying my hand at table-less design. Looking for an XHTML 1.0 strict,
CSS2 compliant solution. Here's the result I'm looking for: DIV II: Some text and a form which should be vertically centered
Hard to say. URL?
DIV II is the one I cannot resolve. It should span the whole page
width, no matter the size of its content.
Easy, do nothing.
'Text A' should be aligned to the left,
And? That is easy, but you most likely also want to limit it width.
'Form B' should be aligned to the right but both should be vertically aligned in the middle.
Something from:
http://www.student.oulu.fi/~laurirai/www/css/middle/

Not too hard. But now you have only described something that should cause
text A and text B to overlap, and overflow div II. So there lies your
problem, and solution depends much on real case. Easy to solve, if you
pretend that IE supports min-height, I think.
Table-less layout advocates, here's your chance to make a convert :)
Any suggestions/pointers appreciated. +--------------------------------------------------------------------+
| Div II |
| |
| ............... ...... |
| ............... ...... : : |
| : Text A : : Form B : |
| ............... ...... : : |
| ............... ...... |
| |
| |
+--------------------------------------------------------------------+

What are text A and text B? If they are practically random, this is hard.
(but not impossible, even in IE) If there is some clues, it should not be
too hard.

URL?
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä