Hi there, for starters IE6 does not support fixed positioning, you'll need to workaround this, here is a useful article: http://ryanfait.com/position-fixed-ie6/.

In regards to the overlaps on the right hand boxes, you would be better off formatting these as 2 columns, with float lefts on them and their parents, that will give you better control over the elements inside without having to play around with huge paddings.

Instead of having this in an ordered list (ol) I'd mark them up like this:


<div class="right-box">


<div class="description">
<h2><span>1</span>Royal Flush</h2>
<p>Ace, King, Queen, Jack, and 10 of any suit</p>
</div>
<div class="example"><em>example</em>
<p><span class="heart">A</span><span class="heart">K</span><span class="heart">Q</span><span class="heart">J</span><span class="heart">10</span></p>

</div>


</div>

In the CSS give your right-box a width, description a width and example a width. That should allow you to layout more precisely, you can then replicate the right-box div all the way down the page.