Following lots of advice and the clear benefits, I have replaced loads of nested tables with a set of divs. I far prefer to use the container approach as going back to tables would not only be wasteful but would mean I could not easily turn the same site into a mobile version just be changing the css and including an additional class in elements that I want to suppress (such as images). ie maintenance would be much more messy.

The overall structure I want to represent is a repeated set of three columns with the first column a small image or logo followed by two text columns. The image and text will vary for each repetition and there will be typically 20 such cases to a page.

I particularly want to ensure that the site validates to W3C standards using either Total Validator validator.w3.orrg/check.

The XHTML I have is:

<div class="wrap">
  <div class="logpic">
    <a class="inlink" name="xxxx" />
    <a class="biglinks" href="xxxx.html" target="_blank">
      <img  class="logo" src="xxxx.gif" title="My title for hovering" alt="(opens in new window)" />
      Title that needs to be below
  <div class='alltext'>
    <div class='col1'>
      <p>Column 2 text ...</p>
    <div class='col2'>
      <p>Column 3 text ....</p>
  <div class='footer' />
    <p class='select'><a class='seclinks' href='#top'>top</a></p>
where the appropriate styles are:

div.wrap {width:880px;}
div.logpic {
width: auto; 
min-width: 160px; 
margin-top: 0; 
margin-bottom: 4em;
text-align: left; 
top: 0; 
position: relative;
div.alltext {
div.col1 {
div.col2 {float:right; 
img.logo {
float: left; 
padding: 0; 
top: 4em;  
position: absolute;}
a.inlink {text-decoration:none; color:#444a40;}
a.biglinks:hover {color:#44f; font-weight:bold; text-decoration:none;font-size:1.2em; text-align:center; text-align: bottom;}
a.biglinks:link {color:#444; font-weight:bold; text-decoration:none;font-size:1.2em;  text-align:center; text-align: bottom;}
a.biglinks:active {color:#4f4; font-weight:bold; text-decoration:none;font-size:1.2em;  text-align:center; text-align: bottom;}
a.biglinks:visited {color:#f44; font-weight:bold; text-decoration:none;font-size:1.2em;  text-align:center; text-align: bottom;}
a.seclinks:link {color:#444; text-decoration:none; font-size:0.9em;}
a.seclinks:active {color:#4f4; text-decoration:none; font-size:0.9em;}
a.seclinks:visited {color:#f44; text-decoration:none; font-size:0.9em;}
a.seclinks:hover {color:#44f; text-decoration:none; font-size:0.9em;} {font-size:0.9em; text-align:right; margin-right:20px; margin-left:20px; padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; border-bottom:1.3px solid #cccccc; clear: both;}
The issues are:

1) I want the text below the image rather than above it but inserting a <p> ... </p> (or <h4> ... </h4>) within the <a> ... </a> is illegal. How do I achieve this?

2) The above XHTML validates OK (using Transitional to cope with the target="_blank"). But using either FF DOM inspector or IE Web Developer tools, each repetition starting with <div class="wrap"> is a container that ends at the bottom of the page rather than after the <p class="select">. There a footer that I want to include between two outer <div>s that is therefore not shown.

I can display this footer by adding an extra </div> to the end of the coding above for each wrap but the XHTML then become illegal. It seems that FF3 and IE8 are not obeying the container rules but this surely can't be so, Any suggestions how to ensure that the coding above is self contained?

3) Sometimes the image in the first column is too high. Other than resizing it before use - difficult if it is located elsewhere - how do I extend the second and third columns so that the bottom <p class="select">...</p> is always below the image. Note that this happens whether I have an extra </div> in or not.

Any help would be much appreciated...