CODEWITHSUNDEEP
csshtmlfloating
Fabian
Fabian

Reputation: 1836

HTML/CSS: Divs with percental width + padding and floating

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 :)

Upvotes: 0

Views: 1015

Answers (2)

Rmn
Rmn

Reputation: 111

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.

Upvotes: 0

cheesetor
cheesetor

Reputation: 91

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.

Upvotes: 3

Related Questions