CSS Forum

**derjavina** · 07-09-2007, 08:02 AM

Is there some way I can vertically align 2 or more lines of text in the following way:

XXXXXXX
XXXXXXX
X image X
XXXXXXX First line of text here.
XXXXXXX Last line of text flush with the bottom of the image.

**LadynRed** · 07-09-2007, 03:55 PM

Put everything inside a <div>, float the image to the left, align the text to the bottom. Another method would be to use a definition list.

**NateL** · 07-09-2007, 05:44 PM

Here's a code I commonly use:

HTML Code:

<div id="idname">
<img src="images/imageName.jpg" title="Text" alt="Text" style="float: left; margin-right: 10px;" />
<p>Any information can be added here.text text text goes here here, and here...</p>
</div>

Make sure you set a margin of some sort so the text won't be pushed right up against the image, making it difficult to read

**derjavina** · 07-10-2007, 01:14 AM

Quote:

Originally Posted by LadynRed

...align the text to the bottom. Another method would be to use a definition list.

How do I align the text to the bottom? Everything I have tried has resulted in the first line being where I want the last line of text to be (ie, equal with the bottom of the image), but any remaining text displays beneath the image.

I can absolutely position the text inside another div, which is relatively positioned and uses the image as a background. Eg:

<html>
<head>
<style type="text/css">

.AAA {
position: relative;
height: 253px;
background: url(image.jpg) top left
no-repeat;
}

.BBB {
position: absolute;
bottom: 0;
left: 205px;
}

</style>
</head>
<body>
<div class="AAA">
<div class="BBB">
<p>Line 1.</p>
<p>Line 2.</p>
<p>This line number 3.</p>
</div>
</div>

</body></html>

But this displays differently between browsers, (Firefox inserts a blank line under the text so that it's not really flush with the bottom of the image). So, then I need to change the absolute positioning of the text to bottom:-1em and have an alternate ie.css using bottom:0px.

There must be a better way to do this using some kind of vertical alignment? Like I said, it only seems to work for one line of text, but if you have 2 or 3 lines, the second and third line wind up below the image.

**LadynRed** · 07-10-2007, 04:01 PM

Don't use absolute positioning, float the image left. You could relatively position the text to the bottom of the containing div.

An easier method might be a definition list. You can position each of the elements of a <dl> anywhere you want them.

**derjavina** · 11:11 AM

Quote:

Don't use absolute positioning, float the image left. You could relatively position the text to the bottom of the containing div.

Could you take a look at the code below and tell me what needs changing in order to do that? (I've included borders just so I can clearly see where the boundaries are with the divs.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Test</title>
<style type="text/css">

#divvy {
border:1px solid red;
height:133px;
}

.pic {
height:133px;
width:106px;
float:left;
}

#text {
border:1px dashed green;
position:relative;
bottom:0px;
}
</style>
</head>
<body>

<div id="divvy">
<img class="pic" src="http://www.haywire-media.com/images/image_3.jpg">
<div id="text">
<p>Line 1 of text.<br>Line 2/Last line.</p>
</div>
</div>

</body>
</html>