IE6 bumps the P down below one (but not other) floated divs

Assistance needed with positioning for IE6

[metasilk]

I have a page that has2 absolutely positioned divs (for the menu & logo), an unpositioned div to hold all the content (by this I mean it doesn't have a position attribute, just margins)

Within the content I have a relatively positioned div (for the masthead), three floated divs (for the featured pics, which vary in size), and h2 and p blocks, and a contact div.

The floated divs and the text are in a containing div (#content).

All is well in most current browsers, but IE6 is pushing the paragraphs down below the floating divs. As my client has this browser, not to mention several of his customers, I must needs support this...

Can this be fixed, and if so, how? I've messed around considerably with width, height, position attributes. Should I wrap things differently? Is there particular CSS I should use in the stylesheet for IE6 (I use conditional comments to pull this in)? Or in the base stylesheet?

Doctype is XHTML strict

The page code (excerpt):

<div id="content">
<div id="masthead"><h1>Productions Solutions, LLC</h1></div>
<div class="featured"><img src="pix/gear/SureFeed_ForceFlex.jpg" style="height:200px; width:175px;" alt="Sure-Feed Force Flex Feeder by Pitney-Bowes" /><p class="caption">Sure-Feed Force Flex Feeder by Pitney-Bowes</p></div>
<h2>Service and Sales of Mailing and Finishing Equipment</h2>
<div class="featured"><img src="pix/gear/Secap_Jet1.jpg" style="height:166px; width:279px;" alt="Jet 1 by Secap" /><p class="caption">Jet 1 high-volume addressing and imaging system by Secap</p></div>
<div class="featured"><img src="pix/gear/Grutz_Challenger.jpg" style="height:125px; width:400px;" alt="Cayenne by Grutzbacher" /><p class="caption">Cayenne inserter by Grutzbacher</p></div>
<p>More text Lorem ipsum dolor etcMore text Lorem ipsum dolor etcMore text Lorem ipsum dolor etcMore text Lorem ipsum dolor etcMore text Lorem ipsum dolor etc</p>
<p>More text Lorem ipsum dolor etcMore text Lorem ipsum dolor etcMore text Lorem ipsum dolor etc</p>
<p>More text Lorem ipsum dolor etcMore text Lorem ipsum dolor etcMore text Lorem ipsum dolor etc</p>
</div>

The base CSS:

#content, #contact {
margin-left: 220px;
margin-right: 20px;
}
.featured {
background-color: #fff;
border-top: 1px dotted #cccccc;
border-right: 1px solid #aaaaaa;
border-left: 1px dotted #dddddd;
border-bottom: 1px solid #aaaaaa;
padding: 7px;
text-align: center;
font-size: 10px; /* to set alt-text size */
color: #555555;
float: right;
clear: right;
margin-left: 5px;
margin-bottom: 5px;
width:auto;
height: auto;
}

The IE6 and lower CSS (blank because I've deleted the experiments that didn't work:

#content {
}
#content h2 {
}
#content p {
}
#content p.caption {
}
.featured {
}

I really appreciate y'all's help. I've been poking for answers here and in a good variety of other sites, without finding the right key yet.

Kir

[Shores]

Sorry, but from your post isn't clear what is the problem, <snip>
Or could you be more precise on what P elements you get wrong?

You are aware that the presence of a block element such as H2 between the two first floated .featured can mean that a clear is inserted?

[edited by: swa66 at 5:27 pm (utc) on Jan. 26, 2009]
[edit reason] Personal URLs aren't allowed out here [/edit]

[metasilk]

Thanks for your reply. You're right!

Moving the H2 element to below the "featured" divs did what I wanted. I thought I'd tried that (since normally I know better), but obviously I hadn't or hand't tested it if I had. Sheesh!

Thanks again (sorry it took me so long to get back in here and say so.)