Gary Samuels
asked on
float left align bottom
The included code is a simple layout of 3 images lined up left to right across the screen. Each image is a different size and they are vertically aligned to the bottom by default. The problem I am having is when I try to add some text centered below each image, such as a description of the image. The text will break the flow of the images or the images and text will end up being aligned to the top.
I have tried added a line break after the image followed by some text:
<a href="#"><img src="item1.jpg"><br/>Item 1</a>
This will break the flow.
I have tried adding the float directly to the link:
#item1 {float:left;}
<a id="item1" href="#"><img src="item1.jpg"><br/>Item 1</a>
This works except the 3 images end up aligned to the top.
How can I add a description centered below each image and still keep the flow aligned to the bottom. The size of the images and the length (number of lines) of the description will vary so I can not use absolute positioning. Please do not answer unless you have tested the results.
I have tried added a line break after the image followed by some text:
<a href="#"><img src="item1.jpg"><br/>Item 1</a>
This will break the flow.
I have tried adding the float directly to the link:
#item1 {float:left;}
<a id="item1" href="#"><img src="item1.jpg"><br/>Item 1</a>
This works except the 3 images end up aligned to the top.
How can I add a description centered below each image and still keep the flow aligned to the bottom. The size of the images and the length (number of lines) of the description will vary so I can not use absolute positioning. Please do not answer unless you have tested the results.
<!DOCTYPE HTML>
<head>
<STYLE type="text/css">
#section1 {}
#item1 {float:left;}
#item2 {float:left;}
#item3 {float:left;}
.description{}
.clear{clear:both;}
</STYLE>
</head>
<body>
<div id="section1">
<a id="item1" href="#"><img src="http://farm5.static.flickr.com/4152/4990291568_9fd50bed0f_m.jpg"><br/>Item 1</a>
<a id="item2" href="#"><img src="http://farm5.static.flickr.com/4086/4989684949_49fee2bf45_m.jpg"><br/>Item 2</a>
<a id="item3" href="#"><img src="http://farm5.static.flickr.com/4153/4990291660_7f53b3958e_m.jpg"><br/>Item 3</a>
</div>
<div class="clear"> </div>
</body>
</html>
<!DOCTYPE HTML>
<head>
<STYLE type="text/css">
#section1 {float:left;}
#item1 {}
#item2 {}
#item3 {}
.description{}
.clear{clear:both;}
</STYLE>
</head>
<body>
<div id="section1">
<a id="item1" href="#">
<img src="http://farm5.static.flickr.com/4152/4990291568_9fd50bed0f_m.jpg"></a>
<a id="item2" href="#">
<img src="http://farm5.static.flickr.com/4086/4989684949_49fee2bf45_m.jpg"></a>
<a id="item3" href="#">
<img src="http://farm5.static.flickr.com/4153/4990291660_7f53b3958e_m.jpg"></a>
</div>
<div class="clear"> </div>
</body>
</html>
Sorry for posting the Code as text, Here the code in right format
<!DOCTYPE HTML>
<head>
<STYLE type="text/css">
#section1 {float:left;}
#item1 {}
#item2 {}
#item3 {}
.description{}
.clear{clear:both;}
</STYLE>
</head>
<body>
<div id="section1">
<a id="item1" href="#">
<img src="http://farm5.static.flickr.com/4152/4990291568_9fd50bed0f_m.jpg"></a>
<a id="item2" href="#">
<img src="http://farm5.static.flickr.com/4086/4989684949_49fee2bf45_m.jpg"></a>
<a id="item3" href="#">
<img src="http://farm5.static.flickr.com/4153/4990291660_7f53b3958e_m.jpg"></a>
</div>
<div class="clear">
<table width="100%" border="0">
<tr>
<td width="16%"><div align="center">item1</div></td>
<td width="27%"><div align="center">item2</div></td>
<td width="31%"><div align="center">item3</div></td>
<td width="26%"><div align="center"></div></td>
</tr>
</table>
</div>
</body>
</html>
ASKER
Please notice in the above question: " The size of the images and the length (number of lines) of the description will vary". The images are for example only. The real images will vary in size. There is no way to know the given width of any image so setting table widths in pixel or percent will not work.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<!DOCTYPE HTML>
<head>
<STYLE type="text/css">
#section1 {float:left;}
#item1 {}
#item2 {}
#item3 {}
.description{}
.clear{clear:both;}
</STYLE>
</head>
<body>
<div id="section1">
<a id="item1" href="#">
<img src="http://farm5.static.flickr.com/4152/4990291568_9fd50bed0f_m.jpg"></a>
<a id="item2" href="#">
<img src="http://farm5.static.flickr.com/4086/4989684949_49fee2bf45_m.jpg"></a>
<a id="item3" href="#">
<img src="http://farm5.static.flickr.com/4153/4990291660_7f53b3958e_m.jpg"></a>
</div>
<div class="clear">
<table width="100%" border="0">
<tr>
<td width="16%"><div align="center">item1</div>
<td width="27%"><div align="center">item2</div>
<td width="31%"><div align="center">item3</div>
<td width="26%"><div align="center"></div></td>
</tr>
</table>
</div>
</body>
</html>