Results 1 to 2 of 2

Thread: Bottom Align Images and Top Align Text in Row Below With HTML/CSS?

  1. #1
    truecalling1234 Guest

    Bottom Align Images and Top Align Text in Row Below With HTML/CSS?

    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.

    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="0" style="border:1px solid black;">
      <tr>
        <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
        <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
        <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
        <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
      </tr>
      <tr>
        <td valign="top">text</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>

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    In your code you have valign="bottom" for a whole row of td cells which are all the same height, so the valign does nothing. All the images will just fill the whole td cell height. The next row of cells has valign="top" which will be needed if some cells have more text than others, but a CSS list or div or p tag will automatically start at the top.

    In answering your question, you can use CSS with a list; two lists might be easier to code. The li tags in each list need float: left; to be side by side. The li tags with images will all be the same height because the images are all the same. The second list of li tags will have content that starts at the top.

    For both lists (especially the second) you need to clear the floats so that content below the lists doesn't move up to overlap part of the list.

    This work, change the image url and width of the li tag to suit it:-
    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 name="keywords" content="Wickham" />                
    <meta name="description" content="Test items" />            
    <meta http-equiv="content-type" content="text/html;  charset=utf-8" />
    <title>Test</title>                  
    
    <style type="text/css">
    * { margin: 0; padding: 0; }
    ul { list-style-type: none; }
    li { float: left; width: 90px; margin-right: 20px; }
    .clear { clear: both; width: 100%; height: 0; visibility: hidden; }
    </style>
    
    </head>
    
    <body> 
    
    <ul>
    <li><img src="images/orange65x50.jpg" alt="orange" /></li>
    <li><img src="images/orange65x50.jpg" alt="orange W" /></li>
    <li><img src="images/orange65x50.jpg" alt="orange W" /></li>
    <li><img src="images/orange65x50.jpg" alt="orange W" /></li>
    </ul>
    <div class="clear">&nbsp;</div>
    <ul>
    <li>Text</li>
    <li>Text<br />line 2</li>
    <li>Text</li>
    <li>Text<br />line 2<br />line 3</li>
    </ul>
    <div class="clear">&nbsp;</div>
    <p>More content here</p>
    
    </body>
    </html>
    I added in margin-right: 20px to the li tag style to keep them apart.
    Last edited by Wickham; 25 Nov 2010 at 01:10 AM.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. CSS DIV vertical align to bottom
    By xraverx in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 25 Oct 2010, 04:40 AM
  2. Bottom align with CSS?
    By J0nny in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 03 Dec 2007, 03:08 PM

Posting Permissions

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