...

View Full Version : 2 Rows, Top row bottom align and Bottom Row Top Align



jonnyfive
11-24-2010, 10:50 PM
Hey everyone,

First post here. Can the layout below be replicated with HTML/CSS? I've been trying to use <ul> and <li> but am struggling.

EDIT: I should have explained this better in my first post but I will need to put another row of images and text below this initial row. However, the image in cell one in the first row may be wider and/or higher than the image in the second row. The difference between images would need to be the same no matter on the width and/or height of the image (hope this all makes sense!). Here is how it might be done with tables:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" height="400px" border="1" style="border:1px solid black;">
<tr style="1px solid black;">
<td valign="bottom" style="1px solid black;"><img src="Tulips.jpg" width="300" height="225" /></td>
<td valign="bottom" style="1px solid black;"><img src="Tulips.jpg" width="300" height="225" /></td>
<td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
<td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
</tr>
<tr>
<td valign="top">image 1 </td>
<td valign="top">text<br />line two</td>
<td valign="top">text</td>
<td valign="top">text<br />line two<br />line three</td>
</tr>
</table>

<p>&nbsp;</p>
<table width="100%" height="400px" border="1" style="border:1px solid black;">
<tr>
<td valign="bottom"><img src="Tulips.jpg" width="161" height="225" /></td>
<td valign="bottom"><img src="Tulips.jpg" width="300" height="156" /></td>
<td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
<td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
</tr>
<tr>
<td valign="top">image 2 </td>
<td valign="top">text<br />line two</td>
<td valign="top">text</td>
<td valign="top">text<br />line two<br />line three</td>
</tr>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum