float: left breakage
<p>Compare this <a href="http://jsfiddle.net/AndyMP/tbYsM/1/" rel="nofollow">http://jsfiddle.net/AndyMP/tbYsM/1/</a> which works with this <a href="http://jsfiddle.net/AndyMP/tbYsM/2/" rel="nofollow">http://jsfiddle.net/AndyMP/tbYsM/2/</a> which doesn't.</p>

<p>The first is just a block of text. The second, I've attempted to split it into two columns next to each other. I've surrounded the text with  tags including  which is the bit that breaks it.</p>

<p>Any ideas what the solution is? </p>

<p>JQUery</p>

<pre><code>    var $block1 = $(".block1");
var $block2 = $(".block2");
var $blog_slide_container = $('#blog_slide_container');
$blog_slide_container.animate({height: $block1.outerHeight()});

$(function() {
$(".left_slide").click(function() {
    $block1.stop(true, true).animate({ left: -400 }, 500, function () { $(this).hide(); });
    $blog_slide_container.animate ({height: $block2.outerHeight()});
    $block2.stop(true, true).animate({ left: 0 }, 500);

});

$(".right_slide").click(function() {
    $block1.show();
    $blog_slide_container.animate({height: $block1.outerHeight()});
    $block2.stop(true, true).animate({ left: 400 }, 500);
    $block1.stop(true, true).animate({ left: 0 }, 500);
});
});
</code></pre>
