CODEWITHSUNDEEP
csspositioning
rlemon
rlemon

Reputation: 17666

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

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

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

Upvotes: 1

Views: 942

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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/

Upvotes: 4

Gustavo Daniel
Gustavo Daniel

Reputation: 2478

I changed height to 396 and it works fine.

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

Upvotes: 0

Brandon Babb
Brandon Babb

Reputation: 186

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;"

Upvotes: 0

Related Questions