"Simple" text and Image layout: help!

[Winedark]

I'm having a hard time setting up the following layout:

BBBBBBBBBBBBBBBBBBBBB..
B
B OOOOOOOO
B OIMAGEOO
B OOHEREOO
B OOOOOOOO OOOOOOOO
B OOOOOOOO OOTEXTOO
B OOOOOOOO OOHEREOO
B OOOOOOOO OOOOOOOO
B
BBBBBBBBBBBBBBBBBBBBB..

(where the text and image appear to be enclosed within a single border and share the same baseline, so that adding text to the <p> will make the textblock on the right taller).

I know this can be done very simply with a 2-cell table, but I'd prefer to use CSS!

I know I can put the image in one DIV and the text in another that's absolutely positioned (e.g."bottom:50px, with:200px;"), but this is very clumsy and displays poorly as the window is resized...

[BlobFisk]

What about floating the image to the left and vertically aligning the contents of the containing div to the baseline?

[Winedark]

Well, that sounds like exactly what I'd like to do... however I haven't been able to align the text so that the entire textblock sits on the baseline too.

Care to share some CSS?

[BlobFisk]

try: vertical-align: baseline;

[Winedark]

(laughs)

Yes, I've been using the declaration. What I need is some help using it in context. I'm having trouble aligning a whole block of text, instead of just a single line. Can you give me a bit more?

For instance I have three divs:

div.container {height:400px; width:400px; border: thin dashed red;}

div.image {height:300px; width:200px; border: thin dashed green; float:left;}

div.text {height:auto; width:180px; border: thin dashed black; float:right;}

Using the following HTML:

<div class="container">
<div class="image"><img src="./image.jpg" /></div>
<div class="text">Sample Caption here, and then some filler text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>

By default the nested divs are aligned to the top of the container.

When I use "vertical-align:baseline;" in any combination of the divs, it has no result.

So a little more direction, please?

[drbrain]

.container { position: absolute; height: 400px; width: 400px; border: thin dashed red; }
.image { position: absolute; bottom: 0; left: 0; border: thin dashed green; height: 300px; width: 200px; }
.text { position: absolute; bottom: 0; right: 0; border: thin dashed black; width: 196px; }

Of course, this assumes that the image will always be taller than the text, and it isn't flexible when you adjust the text size.

Why do you want this particular layout?

[BlobFisk]

Excellent catch drbrain - never thought of bottom:

But watch out for browser compatibility problems with this though...

[Winedark]

Thanks very much for your suggestions. This was close to what I originally began with (the only difference being that I offset the text and image from the bottom).

However, as BlobFisk anticipated some browsers don't like this. Opera, for instance, aligns the text div to the bottom of the container, but the height of the textblock defaults to the full height of the container, so the text is aligned at the top of the image. I haven't encountered any way to counteract this behavior. (Any more suggestions...?)

I'm interested in using this layout because I'm working with a design that emulates print pages where this kind of alignment is used; typically in the documents I'm recreating the text is a caption for the related image. (Of course the example code I've used here is just for the sake of discussion).

Anyway, in order to move on, for now I've simply used tables for this. This frustrates my CSS principles, as I firmly believe style should be separate from content; but one could argue that a 2-cell table is appropriate for an image and its caption because they are, after all, inter-related data.