0

I have a problem and I guess there is a common solution but i didn't know how to search for it properly. I want 2 div floating next to each other, both take 50% each of the width. Now I want to give each of them some padding. What happens is, that they wrap around, instead of being displayed next to each other, because they are bigger then 50% now. What's the hack here?

some code:

    #nw_main_line1_l {
      height: 512px;
      width: 50%;
      float: left;
      padding-right: 11px;
      background-color: red;
    }
    #nw_main_line1_r {
      height: 512px;
      width: 50%;
      float: left;
      padding-left: 11px;
      background-color: green;
    }

What happens here is that the green one is below the red one. If i delete the paddings, everything is fine and they float like excepted.

kind regards :)

Oswald
  • 31,254
  • 3
  • 43
  • 68
Fabian
  • 1,806
  • 5
  • 25
  • 40

2 Answers2

3

This is due to the padding. You can either reduce the width or use the modern way with:

* { box-sizing: border-box; }

More info on box-sizing here.

cheesetor
  • 91
  • 3
0

You basically found the answer of the problem yourself, but did not explicitly name it. Removing the padding fixes the issue. And if you would exchange the padding for a border (or use both) you will notice that the boxes are broken again.

This is due to the fact that at least in Firefox' box model the resulting box width (e.g. of a div) will be

2 * [Border-Width] + 2 * [Padding-Width] + width

Maybe you can use CSS3 flexible boxes to conveniently circumvent your issue.

Rmn
  • 111
  • 1
  • 6