CSS positioning problems

Hi,

I'm currently designing a new website, but have come across some problems that I have been unable to solve, despite hours of trial and error fiddling with the code.

I'm trying to display a large image to the left, with a subcolumn, if you like, to the right displaying sub-information - as can be seen at The Volkswagen UK homepage (http://www.volkswagen.co.uk/home)

The html code I am using for this is:
<DIV id=test>
<H1>Deals</H1><IMG height=329 alt="" src="images/c4test.jpg" width=560>
<UL>
<LI>Hi
<LI><IMG height=229 alt="" src="images/citroen_bxtest.jpg" width=208>
<LI>How are you all?</LI>
</UL>
</DIV>

With the CSS code as:
#test {
background:#999;
float:left;
width:780px;
margin:0;
padding:0;
}
#test h1 {
float:right;
width:210px;
margin:0;
padding:0;
font-size:100%;
color:#fff;
}
#test img {
float:left;
}
#test ul {
float:right;
width:208px;
margin:0;
padding:0;
list-style:none;
}
#test li {
background:#999;
margin:0;
padding:0;
}


The problem I am getting when viewing the page in IE6 is that there seems to be imaginary margins, despite having declared that I want the margins to be 0.
I'll show you what I mean:
http://img.photobucket.com/albums/v198/vyp0r/cssproblem.jpg
As you can see, there seems to be padding of some sort either side of the images. I have tried declaring margin:0; and padding:0; in #test img but to no avail.

I have, however, located the root problem as being the #test img css code - though I cannot understand why this would be so.

In Mozilla Firefox and Netscape the results are also bizarre, with the following displaying from the same code:
http://img.photobucket.com/albums/v198/vyp0r/cssproblemff.jpg
:confused:
The "padding" problem seems not to occur, but it's as though the final list item seems to shift to a different list.

Any help or suggestions would be greatly appreciated.
Thanks!

Nevermind. I finally figured it out! :cool:

For anyone interested, this is what I changed to fix the problem (red text highlights what has been changed)

In the original HTML code I added the <H2> markers in order to be able to float the first image to the left, without floating the second image to the left as well (which was causing the original problem).
<DIV id=test>
<H1>Deals</H1><H2><IMG height=329 alt="" src="images/c4test.jpg" width=566></H2>
<UL>
<LI>Hi
<LI><IMG height=229 alt="" src="images/citroen_bxtest.jpg" width=214>
<LI>How are you all?</LI>
</UL>
</DIV>

#test {
background:#999;
float:left;
width:780px;
margin:0;
padding:0;
}
#test h1 {
float:right;
width:210px;
margin:0;
padding:0px;
font-size:100%;
color:#fff;
}
#test h2 {
display:block;
float:left;
margin:0;
padding:0;
}
#test ul {
float:right;
width:214px;
margin:0;
padding:0;
list-style:none;
}
#test li {
background:#999;
margin:0;
padding:0;
}

Here I changed the #test img style to #test h2 so that the float:left attribute wasn't applied to the second image. Instead I was now able to only apply this to the first image, with the use of the <h2> markers.

And voila. The intended result! :):
http://img.photobucket.com/albums/v198/vyp0r/cssproblemfixed.jpg

I really wouldn't put just an image inside of an h2 element. You should read about the term "html semantics". Why not just float the image directly?

That's what I could have done. Or a css table with 1 main col and a <span>,
<img> and <p> on the right. However, if it works.

I really wouldn't put just an image inside of an h2 element. You should read about the term "html semantics". Why not just float the image directly?
How would I go about floating just the one image, and not having it apply to both images?

give it a class -

<img src="myimage.jpg" alt="my image" class="float-right"/>
Style:
img.float-right { float: right; }