CSS: Irregular Grid Layout

Question

I'm trying to create an irregular grid layout using CSS. Here's my Jfiddle so far:

http://jsfiddle.net/F94gu/1/

Code:

HTML:

<div style="width:275px;">
     <div class="box" id="box1"></div>
     <div class="box" id="box2"></div>
     <div class="box" id="box4"></div>
     <div class="box" id="box5"></div>
     <div class="box" id="box3"></div>
     <div class="box" id="box6"></div>
</div>

CSS:

.box { margin: 2px; float:left; }
#box1 { height: 86px; width:  80px; background-color: red;}
#box2 { height: 42px; width:  161px; background-color: green;}
#box3 { height: 42px; width:  80px; background-color: blue;}
#box4 { height: 86px; width:  80px; background-color: orange;}
#box5 { height: 129px; width: 80px; background-color: yellow;}
#box6 { height: 42px; width:  161px; background-color: brown;}

What I'm trying to do is move the blue block up (directly underneath the red block), which would allow the brown block to move to the left and up. Below is an image of how it currently looks vs what I'm trying to do.

Hope this is enough information, I'd be happy to clarify if you need more information. I'm aware that the pixels are slightly off, it's about a quarter of the size of what I'm looking for so I divided all of my pixel definitions by 4, which lead to some decimals which I just ignored (and causes the lines to not match up perfectly).

Answer 1

http://jsfiddle.net/F94gu/2/

''Dirty'' solution, with negative margins, but...

  .box { margin: 2px; float:left; }

    #box1 { height: 86px; width:  80px; background-color: red;}
    #box2 { height: 42px; width:  161px; background-color: green;}
    #box3 { height: 42px; width:  80px; background-color: blue;margin-top:-87px;}
    #box4 { height: 86px; width:  80px; background-color: orange;}
    #box5 { height: 129px; width: 80px; background-color: yellow;}
    #box6 { height: 40px; width:  163px; background-color: brown;margin-top:-42px;}