Question

Compare this http://jsfiddle.net/AndyMP/tbYsM/1/ which works with this http://jsfiddle.net/AndyMP/tbYsM/2/ which doesn’t.

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.

Any ideas what the solution is?

JQUery

    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);
});
});

Answer 1

Just add a div with a clear: left; after the two floated divs. Here it is in action.