How can this 2 row, bottom align and top align design be achieved?

L

leafchaser

New Member
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:

Code: 
<!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>
 
Last edited:
smoovo

smoovo

New Member
Please provide us a link. It will be the best way to know what is going on.

Comments:
style="1px solid black;" is not a right code, use style="border:1px solid black;".
 
You must log in or register to reply here.
Top