Align images to the bottom of a div

Forum Moderators: not2easy

Message Too Old, No Replies

Align images to the bottom of a div

Works in FF, not in IE

adb64

9:56 pm on Sep 13, 2007 (gmt 0)

I have some text on the left side of the page and a number of stacked images to the right of it. What I want is to align the images with the bottom of the text. I use the code below:

HTML:


<div class=chapter>
<div class=imglist>
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<p>Chapter Text...</p>
</div>

CSS:


.chapter {width: 690px; position: relative;}
.imglist {float: right; width: 140px; position: absolute; right: 0; bottom: 0;}
.chapter P {width: 540px;}

In FF this works as I want, but IE (6) will put the images at the bottom of the page and not aligned with the bottom of the chapter div. Adding a float:left to the P doesn't make any difference.
How can I get it right for IE?

Thanks,
Arjan

Marshall

12:46 pm on Sep 14, 2007 (gmt 0)

Try adding

div.imglist {
vertical-align: baseline;
}

Baseline aligns the baseline of the current element with the baseline of the parent element box. If the current element does not have a baseline, the bottom of the current element’s box should be used.

Marshall

adb64

1:10 pm on Sep 14, 2007 (gmt 0)

Marshall, thanks for the reply but it makes no difference.
My page contains a number of those chapters and in IE the images of the first chapter are below the last chapter in the footer and some even below the footer.
In FF all is ok.

adb64

1:47 pm on Sep 14, 2007 (gmt 0)

Ok, got it solved now.
In my example above I have a width:690px on the chapter. I didn't have that in my own CSS. When the width is present, IE renders it fine like FF does. When the width is not present, IE puts the images at the bottom of the page.
I only don't understand why the width is needed. The example below shows the effect without images.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
<!--
.chapter {
 position: relative;
 width: 690px; // remove to move the imglist to the bottom of the page
}
.imglist {
 float: right; 
 width: 140px; 
 position: absolute; 
 right: 0; 
 bottom: 0;
}
.chapter P {
 width: 540px;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="chapter">
<div class="imglist">
This text should be aligned to the bottom of the Left text 1
</div>
<p>
Left text 1<br>
Left text 1<br>
Left text 1<br>
Left text 1<br>
Left text 1<br>
Left text 1<br>
Left text 1<br>
Left text 1<br>
Left text 1<br>
Left text 1<br>
</p>
</div>
<div class="chapter">
<p>
Left text 2<br>
Left text 2<br>
Left text 2<br>
Left text 2<br>
Left text 2<br>
Left text 2<br>
Left text 2<br>
Left text 2<br>
Left text 2<br>
Left text 2<br>
</p>
</div>
</div>
</body>
</html>

Marshall

2:13 pm on Sep 14, 2007 (gmt 0)

Quirky, ain't it!

Marshall