2

I am confused about how to get border-box working in CSS.

Basically I want two divs stacked next to each other: a left-hand #sidebar with a fixed width, and the remainder of the page (the #results element) taken up by text.

I have done this by floating both divs left, using a fixed width of 220px on #sidebar, and setting width: 100%, left-margin: 220px, and box-sizing: border-box on the #results element.

However, the #results element is too wide by 220px - it looks as though box-sizing is not being applied at all.

This JSFiddle demonstrates my problem: http://jsfiddle.net/m8KFe/3/

Richard
  • 62,943
  • 126
  • 334
  • 542

1 Answers1

4

The border-box value only constrains the padding & border areas - margins are not considered.

Taken from the Basic UI Module:

border-box

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

Community
  • 1
  • 1
Adrift
  • 58,167
  • 12
  • 92
  • 90
  • 1
    It does not include margins because it would break A LOT of things vertically: http://stackoverflow.com/q/10808413/1654265 – Andrea Ligios Aug 01 '13 at 12:55