Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 Rows, Top row bottom align and Bottom Row Top Align

    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 by jonnyfive; 11-25-2010 at 12:17 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •