HTML divs, how to wrap content?

Question

I have 3 div\'s like on this image:

div1 has fixed width but variable hei

Answer 1

Seeing as everyone luuuuuuurves jQuery, I decided to throw something together that actually does what you asked. Have fun :)

    
Test
    
Test
    
Test


    
Test
    
Test
    
Test


    
Test
    
Test
    
Test


    
Test
    
Test
    
Test

Throw in some css

#div1, #div2, #div3, #div4 {
    border:3px double #000;
    background:#fff
}
#div1 {
    width:200px;
    float:left;
}
#div4 {
    clear:both;
}

And finally your jQuery.

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
    }
});

Now. I am not advocating this method, just saying that it actually achieved what you asked for whereas nothing else here has ;)

See it at this jsFiddle. Simply add one more

Test

to div1 and you will see that div3 then goes to the right of div1 as per your image.

Now, I know someone will say "But div1 doesn't take all the height then!", well fear not. Check the updated jsFiddle with one added piece to the javascript to see your questions answered too. Just delete one of the

Test

from div1.

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
        $('#div1').css({
            height: $('#div2').outerHeight() + $('#div3').height()
        });
    }
});

I have to reiterate that this solution relies on Javascript. Turn it off, device doesnt support it, this stops working.