Three lines of text next to an image

I tried inline, but that doesn't work...

[bakedjake]

*tiptoeing from Website Technology forum to CSS...*

I'm constructing my first relatively complex, non-blog CSS non-table page. It's a standard static, two-column layout largely based on the "static width and centered" template from glish.com. I've got it working well, and I'm almost done! :) (LisaB and Nick, you've been a bigger help than you know!) I have one big problem:

I have an image. It's actually a mail icon. This mail icon is big enough for three lines of text to fit to the right of it (the address). Here's my best text rendition of what I'm trying to do:

[/\/\] bakedjake
[ -- ] 123 Main St.
[\--/] Cleveland, OH 66666

Now, the icon (represented by my little drawing on the right) is 37 pixels, so I figured that an 8px font size would do it. Unfortunately, I can't seem to get the text to display along side the icon; the first line will stay put, but the br / breaks the flow and puts the second line of text under the icon. Should I be using two seperate divs and absolute positioning? Or is there something I'm missing?

I can post code if necessary, but I don't think it will help because it's wrong ;-) If this can't be done easily, I'll just make the whole thing a graphic, but I'd rather not do that. :)

[DrDoc]

How about float:left on your image? ;)

[bakedjake]

bah I am an idiot for forgetting that.

Thanks Doc, works great. :)

[TryAgain]

Ok, and then how do you also center the text so that it looks something like this:

¦/\/\¦ 
¦/\/\¦ ....bakedjake 
¦ -- ¦ ...123 Main St. 
¦\--/¦ Cleveland, OH 66666 
¦\--/¦ 

(Without the dots that is, the [pre] tag does not do it's job very well. The text is trivial, but how to center relative to the image?)

[DrDoc]

If the text is wrapped in an element such as a div or a paragraph you can easily use text-align to control the text within the div/paragraph.

[TryAgain]

Yes, but how do I vertically center "B" relative to "A" like in this situation:

.---------. 
¦.........¦ 
¦.........¦ 
¦.........¦ .-----------. 
¦.........¦ ¦...........¦ 
¦....A....¦ ¦.....B.....¦ 
¦.........¦ ¦...........¦ 
¦.........¦ ¦...........¦ 
¦.........¦ .----div----. 
¦.........¦ 
¦.........¦ 
.---div---. 

[DrDoc]

Well, for that to work you cannot use float. Instead, you have to make both divs

display:inline

. Then you just set

vertical-align:middle

and -- voila! :)

[TryAgain]

That works if the two div's contain one image. But if one of them contains a few lines of text, the other div lines up with the first or the last line of text, with the rest of the text on top or below.