Image Aling prob :-(

HTML & CSS
1



Writting my first HTML newsletter: http://www.pauserefreshment.co.uk/news/draft_1_newsletter.html and all was going good until i added a row of images on the right. The last one is mis aligned and I just cant figure out why is not in line with the above two. Heres the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>pause... refreshment newsletter</title>
<style type="text/css">
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="0" cellspacing="0" table border="2" bordercolor="#D68126">
  <caption align=bottom style="text-align: left;">
  To unsubscribe email <a href="mailto:hello@pause.co.uk;pauseorders@googlemail.com ">hello@pause</a> with "Unsubscribe" in subject line
  </caption>
  <tr>
    <!-- ============ HEADER SECTION ============== -->
    <td colspan="2" bgcolor="#A6AE1F" ><img align=right src="../images/model_bean/taste_profile_3.jpg" alt="fancy a cuppa? Call 01924 363091 :-)" style="padding:0px; margin:0px;">
    <h1 style="color:#622449; padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif">pause... refreshment newsletter<br>
    "Professional coffee machine suppliers"</h1></td>
  </tr>
  <tr>
    <!-- ============ LEFT COLUMN (MENU) ============== -->
    <td width="20%" valign="top" bgcolor="#F1F1F1" background="../images/model_bean/bean_4.jpg"><h4 style="font-size:16px; text-align:center; padding-bottom:0px; border-bottom:0px; color:#D68126;">Barista buddy</br>
        "Articles all about how to make professional "</h4>
      <p style="color:#622449; font-weight:200"><a href="#" style="color:#D68126; font-weight:bold">Barista Training</a><br>
        Get the low down on how to join the super league...[more]<br><a href="#" style="color:#D68126; font-weight:bold">Latte Art</a>
      <br>
      Learn the brush strokes of Latte Art and wow your cafe customers...[more]<br>
      
     
      <a href="#" style="color:#D68126; font-weight:bold">Flat White?</a><br>
      The Australian import that gots the high street coffee chains buzzing. Learn how to make it...[more] 
      </p></td>
    <!-- ============ RIGHT COLUMN (CONTENT) ============== -->
    <td width="80%" valign="top" bgcolor="#f1f1f1" background="../images/model_bean/bean_4.jpg"><h2 style="color:#D68126">pause... refreshment wins world snooker contract<img align="right" src="../images/newsletter/snooker_ronnie_2.jpg" style="padding:0px; margin:20px;" ></h2>
      <p style="color:#622449; font-weight:200">Here's a two column layout with header and footer sections that span the width of both columns. The first table row creates the header and contains a single table cell which uses the colspan="2" attribute-value pair.</p>
      <p style="color:#622449; font-weight:200">The second table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1".</p>
      <h2 style="color:#D68126">pause refreshment expands bean to cup range<img align="right" src="../images/newsletter/cimbali_3.jpg" alt="La Cimbali coffee machine" width="110" height="149" style="padding:0px; margin:20px;"></h2>
      <p style="color:#622449; font-weight:200">The third table row creates the footer. Like the header, it contains a single table cell which uses the colspan="2" attribute-value pair.</p>
      <p style="color:#622449; font-weight:200">Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah </p>
      <h2 style="color:#D68126";>You Tube vids demo coffee machines bla bla blah <img align="right" src="../images/newsletter/you_tube.jpg" alt="La Cimbali coffee machine" width="110" height="149" style="padding:0px; margin:20px;"></h2>
      <p style="color:#622449; font-weight:200">The end of promo copy the beginning of online show and tell?Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah</p>     
  </tr>
  <!-- ============ FOOTER SECTION ============== -->
  <tr>
    <td colspan="2" align="center" height="20" bgcolor="#D68126"><p style="color:#FFFFFF; font-weight:bold; font-family:Arial, Helvetica, sans-serif;">pause refreshment 128 Thornes Lane, Wakefield, WF2 7RE</p></td>
  </tr>
</table>
</body>
</html>

Any insights welcome

2

Try throwing “clear:both;” on those images.

3

brilliant thank you your solution worked :slight_smile: