IE6 Positioning problem (Using Floats)

[Shizoku]

Hello,

I am having a problem with a page that places two floats (an image and description text) side by side using float:left and nine addition float:left order buttons. The problem is that IE6 squashes all of the page (meaning everything contained in my main content container) under the link items on the left navigation bar. It looks perfect in Firefox and IE7. I haven't tested any others.

I've tried creating an additional container for the nine order buttons, but that didn't work either. I'm completely stumped as to why floating the <div> objects isn't working on this page as I've done it countless times before. I've also switched the doctype around a few times, but I've settled with xhtml-transitional for now, as it is validated in that.

Thank you!

Edit: Link - http://susychen.com/pillows_american_beauty_rose_details.html

CSS:

#pillows_image {
width: 215px;
height: 180px;
font-size: 10px;
margin: 0px 0px 20px 5px;
padding: 0px;
float: left; }

#pillows_text {
width: 335px;
height: inherit;
font-size: 11px;
margin: 0px 10px 35px 20px;
padding: 10px 0px 0px 0px;
float: left; }

#pillows_text h1 {
font-size: 16px;
margin: 0px;
padding: 0px; }

#pillows_text p {
margin: 10px 0px 10px 0px;
padding: 0px; }

#pillows_text ul {
list-style-type: disc;
font-size: 10px;
margin: 0px;
padding: 0px 0px 0px 15px; }

.pillows_buttons {
text-align: center;
margin: 5px 20px 25px 20px;
padding: 0px;
width: 250px;
font-size: 12px;
float: left; }

.pillows_buttons form {
margin: 0px;
margin-top: 10px;
padding: 0px; }

[Shizoku]

HTML:

<div id="pillows_image">
<a href="javascript:popUp('pillows_american_beauty_rose_lar ge.html')">
<img src="images/pillows/small/american_beauty_rose.jpg" alt="American Beauty / Rose" /></a>
</div>

<div id="pillows_text">
<h1>American Beauty</h1>

<p>Bring some romance and a fresh accent into your décor
with these beautiful 100% cotton pillows. Sumptuous American
Beauty Rose print on one side and coordinating rose petal print
on the other side lets you change the look.</p>

<ul>
<li>Zippered opening for easy cleaning</li>
<li>Available with or without polyester pillow insert</li>
<li>Coordinating piping around edges</li>
<li>Available in four sizes</li>
</ul>

<p>
<b>Pattern: American Beauty</b>
<br />
<b>Color: Rose</b>
</p>
</div>

<div class="pillows_buttons">
18" x 18" with insert: <b>$25.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (18&quot; x 18&quot; with insert)" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

<div class="pillows_buttons">
18" x 18" without insert: <b>$18.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (18&quot; x 18&quot; without insert)" />
<input type="hidden" name="amount" value="18.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

<div class="pillows_buttons">
12" x 16" with insert: <b>$25.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (12&quot; x 16&quot; with Insert)" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

<div class="pillows_buttons">
12" x 16" without insert: <b>$18.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (12&quot; x 16&quot; without Insert)" />
<input type="hidden" name="amount" value="18.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

<div class="pillows_buttons">
14" x 14" with insert: <b>$25.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (14&quot; x 14&quot; with insert)" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

<div class="pillows_buttons">
14" x 14" with insert: <b>$18.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (14&quot; x 14&quot; without insert)" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

<div class="pillows_buttons">
Neck Roll with insert: <b>$20.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (Neck roll with insert)" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

<div class="pillows_buttons">
Neck Roll without insert: <b>$15.00</b>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://www.susychen.com/images/add_to_cart.png" border="0" name="submit" alt="Add To Cart" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="susychen88@yahoo.com" />
<input type="hidden" name="item_name" value="American Beauty Pillow / Rose (Neck roll without insert)" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
</div>

[simonpeterong]

why not make #pillows_image float:left, then #pillows_text float: right; then leave a small space between both floats so that #pillows_image won't have the tendency to push #pillows_text below, then make pillows_buttons clear: both; so that it will be placed below both image and text divs? then have another div created for the buttons and make it float left and right so that it will have the same effect like the one you did on the image and text?

that's how I see it being fixed :)

[Shizoku]

Thank you, it worked out well. : )