I have always used tables in my layouts and just recently made the switch to divs, as I realize I will have to sooner or later. It's making more and more sense everyday but I ran into a problem which I can't seem to figure out. A friend of mine who has a little more experience with divs offered me a work-around (you will see it in the code

#left{float:left;}
#right{float:left;}

) but it doesnt seem to work in IE6. I would also like to make the height fluid so it changes with the amount of text. When I do not set a height attribute for

#phbanItem

, they all bunch up at the top as 1px height divs.
This is what it's supposed to look like (and does in FireFox 3.5):


This is what it looks like in IE6:


This is the CSS:

#phbanItem {
      width:550px;
      height:370px;
      background:url('phbanBanned.jpg');
      border:#000 1px solid;
      margin-bottom:10px;
}
#phbanTitle {
    width:150px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#00c;
}
#phbanPic {
    width:150px;
}
#phbanDesc {
    width:400px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#000;
    font-weight:bold;
}
#left{float:left;}
#right{float:left;}

This is the HTML:

<div id="phbanItem">
 <div id="left">
  <div id="phbanTitle">D-Drol by 4Ever Fit</div>
  <div id="phbanPic"><img src="graphics/phbanD-drol.gif" alt="D-Drol by 4Ever Fit" /></div>
 </div>
 <div id="right">
  <div id="phbanDesc">D-DROL is a very potent formula designed to increase testosterone level production.<br /><br />
    HOW DOES D-DROL WORK?<br />
    D-DROL increases testosterone level production in the body. After testosterone levels are increased your muscle strength and size will reach gains that no other supplement will have come close to.<br /><br />
    WHAT MAKES D-DROL DIFFERENT FROM OTHER TEST BOOSTERS?<br />
    D-DROL creates immediate and visably noticeable change in Mass, Strength and Recovery time. Enabling lean, dry gains, with NO water retention, and NO aromatization!
    <ul>
      <li>MAXIMUM STRENGTH</li>
      <li>LEAN MUSCLE BUILDER</li>
      <li>TESTOSTERONE BOOSTER</li>
      <li>FAT LOSS & VASCULARITY</li>
      <li>MASSIVE GAINS IN SIZE </li>
    </ul>
  </div>
 </div>
</div>

Any help is greatly appreciated!!

I have always used tables in my layouts and just recently made the switch to divs,

Good for you, very wise move

If you float an element, other than an image, you MUST define a width, so just saying 'float:left' is not sufficient.

I would also like to make the height fluid so it changes with the amount of text.

That is the default behavior, no height settings necessary.

they all bunch up at the top as 1px height divs

They will do that if they are empty AND if you do not CLEAR YOUR FLOATS - see our stickies for help on clearing floats.