Lining up list items at the bottom

[stevet26]

Hi

I am looking to create a table layout using a list. I have three columns each containing an image and a paragraph of text. However, the paragraph of text varies in size and the list items are then dirrerent heights.

Now you are probably thinking 'So what. Whats the problem with that?' Well, what I am trying to do is have a right border on each list item and then one at the bottom and get them all to line up level at the bottom. But I just cannot do this. Can anyone help?

here is the code I am using.

#oUlPictures {
	width:765px;
	height:29em;
	margin:10px 0;
	border-bottom:1px solid #ccc;
		
	list-style:none;
}

#oUlPictures li {
	width:234px;
	height:100%;
	float:left;
	padding:0 10px;
	border-right:1px solid #ccc;
	
	text-align:center;
}

#oUlPictures li p{
	margin-left:5px;
	margin-right:5px;
}

HTML

<ul id="oUlPictures">
<li><img src="#" width="200" height="250"><p>Over-volting the lamp by 10% produces a 16% increase in power to give a 5.8 Watt Lamp. The real benefit however is that the brightness of the lamp (measured in Lumens) is increased by a huge 37% </p></li>
<li><img src="#" width="200" height="250"><p>The figures in the graph show the distance from the lamp (m), the diameter of the beam at that distance (m) and the amount of light striking an imaginary surface at that point (lux)</p></li>
<li><img src="#" width="200" height="250"><p><img src="#"width="200" height="50"><br>Length of Lamp Unit 45mm Diameter of Lamp Unit 35mm Weight of Lamp Unit and bracket 72grams</p></li>
</ul>

Thanking you in advance.

 

[BillyRayPreachersSon]

Check this much-used article out:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

It is all about achieving table layouts using CSS.

Hope this helps,
Dan

 

[Vragabond]

Use table. This is how floating works, every element is high only as much as the content. You could fiddle with min-height or max-height or height in general to cause the lists to be of equal heights but that would be stupid since there is an element in html that does that for you.

 

[stevet26]

Thanks for the replys.

However, is it not advised nowadays to keep away from tables when it come to page layout?

 

[Vragabond]

It is advised to keep away from tables when putting in non-tabular data. Tables have been used for many layout issues in the past, many times even making a simple box which was completely unnecessary. However, looking at what you want to achieve, it might constitute as a small table with three columns. As you have experienced, floated elements have a separate height and the height of one element does not apply to other floated elements next to it. That is what tables can do and I think in this case table is what you're looking for. Or, as I said, toy with heights to make it what you want.

 

[BillyRayPreachersSon]

That depends. If you are, for example, displaying data that is tabular in format, then a table would be ideal.

If you are using a table just to get, for example, a 3-column layout, then there are better ways to do this.

Dan

 

[BillyRayPreachersSon]

Sorry didn't see Vragabond's post! ;o)

Dan