As Carol mentioned, you will need to clear your floats for each instance.
This may seem like a bit more markup than you want, but it will definitely help your overlap problem:
Code:
<style type="text/css">
div.clear{clear:both;height:1px;line-height:1px;margin:0;visibility:hidden}
* html div.clear{padding:0;display:none}
</style>
<div>
<div class="product">
...
</div>
<div class="clear"></div>
</div>
There are some really good clearing methods out there. This one works quite well in this type of situation.
As for height, this problem will go away once you clear the float. I agree with Easywebdev. You don't need to specify the height.
You may also need to specify a width for your float to keep it from breaking in IE MAC. width:auto 'might' do the trick, but don't quote me on this.
A couple of technical notes:
1. Your HEADING hierarchy is not well formed, there is no H1 before the H2.
2. Your FORMS lack a LEGEND and LABELs on the input controls.
3. There should be a text link corresponding with the IMG A, for added clarity. (Okay, I know this sounds corny, but it is just good practice.)
4. FF and NN do not display tool-tip for ALT text. Include an equivalent TITLE attribute to activate the tool-tip in those browsers. In the case of an anchor wrapped image, put the TITLE on the anchor, and the ALT on the image. If not a link, put both on the image.
5. I would recommend setting a base font size in the body to 100%, and then set the reduced size in the wrapper. For instance:
Code:
font:normal 100% Verdana, Arial, Helvetica, sans-serif;
6. Always specify background color BEFORE the image. You could reduce the code to shorthand with good results. For instance:
Code:
color:#1F0D15;
background:fixed #BB9564 url(/new/images/bg_right.jpg) no-repeat 170px 100%;
7. overflow:visible; is the default. This rule is not required.
8. It is always a good practice to include a system language and a human language in the head. For instance:
Code:
<html lang="en" xml:lang="en" ...>
AND
<meta http-equiv="Content-Language" content="en-CA" />
Browsers and SEs will both thank you.
9. I don't have the expertise to go into why, except that it is recommended elsewhere to encode with UTF-8.
10. To pass TIDY, you might need to revamp your URLs to include &. This will rid the two issues: malformed URL, and UNKNOWN entity.
11. Lastly, an empty summary="" on the TABLE will satisfy that requirement. I would move the CSS to the stylesheet, and drop the cellspacing attribute. The padding:0px covers that. For good measure, include TD in the this rule.
Firefox bug with content display
