Divs and images and floats, oh my! (fairly basic CSS issue)

[cleo]

I'm hardly a CSS n00b, but floating divs to create the look of old-school table layouts has always been a bit tricky for me to get my brain around.

Here's what I want:

A whole-page wide div with a border (check)
Containing, from left to right:
an image
a chunk of text that consists of multiple paragraphs
an image

And, now here's the bit that I'm stumbling on, all of the above should be vertically aligned across the middle axis (that is, centered top-to-bottom) as well as horizontally centered (which is easy).

If you can excuse my lack of artistry and use your imagination on the alignment (since it's far from perfect here, but close enough to get the idea):

So how do I do this? I can't predict the height of the container div, so just using margins won't work. And I want the elements to be able to flow to accommodate the text as it (or the window) is resized. Back in the day I'd just do a table with three cells of width *, 50%, * respectively and valign the whole lot, but I just don't know how to handle it using CSS.

Please help! You'll be my best friend...

Damn, I put this in the wrong sub-forum, didn't I? Is there a moderator out there willing to scootch it over to Web Design? Sorry!

 

[Blue Velvet]

Moved to Web Design forum.

 

[angelwatt]

Yeah, this is one of those things that sounds so easy to do until you start typing it up. Here's what I've come up with as one solution. You'll need to change the background image to something you have. The outline property is just so you can see what's happening visually.

HTML:

<div id="head">
<p>here's some text blah blah blah<br/>
here's some more, yada yada yada<br/>
copyright me</p>
</div>

CSS:

body {
 margin: 0; padding: 0;
}
#head {
 margin: 0; padding: 0px;
 width: 100%;
 text-align: center;
 background: url('arrow-up-black.gif')
  no-repeat scroll 5% 50%;
 outline: 1px solid #f00;
}
#head p {
 margin: 0 0 0 25%; padding: 0 25% 0 0;
 width: 50%;
 background: url('arrow-up-black.gif')
  no-repeat scroll 93% 50%;
 outline: 1px solid #0f0;
}

You may notice that the paragraph background image is at 93% rather than 95% as you'd expect. I think it's because of the size of the image. I think it places the left hand side of the image at the percentage, so had to pull it back a tad.