how to keep divs from wrapping to a new line

I have a series of boxes, first of which is 3*(+margins) larger than the rest. They should line up in a nice grid like so.

 + + + = =
 + + + = =
 + + + = =
 = = = = =

however what i'm getting is

 + + + = =
 + + + = =
 + + + = =
      开发者_StackOverflow中文版 = =
 = = =

the boxes are all divs, no container. here is their css

.userBox {
    border: 4px solid #FFF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    margin: 20px;
    float: left;
}

See a live example of what i'm doing

You need to take into consideration the paddings as well.. (if you notice really good, your big box does not align at the bottom with the ones next to it..)

so the height of the big box should be 396 and not 400..

That is because your boxes are

• each one 100px(height) + 8px(borders). All three = 324px
• 40px(margins) between them. All two = 80px
• all together = 404px
• your box needs to be 404px (including the 8px border) so it should be 396px height..

Have a look at http://jsfiddle.net/gaby/yAzQA/5/

By the way

You can do it with CSS only (for modern browsers)

.userBox {
    border: 4px solid #FFF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    margin: 20px;
    float: left;
    height:100px;
    width:100px;
}
.userBox:first-child{
    width:396px;
    height:396px;
}

Demo at http://jsfiddle.net/gaby/yAzQA/14/

When I added an extra 2px to the height of the smaller .userBox it worked perfectly.

Also adding this to .userBox fixed as well: "padding: 1px 0;"

I changed height to 396 and it works fine.

$(".userBox").css({height: 100, width: 100}).filter(":first").css({height: 396, width: 400});