Question

This simple HTML5 layout is intended to have a navigation bar on the left with body text floated alongside it (using percentages rather than pixels for a fluid, responsive design – calculations are in comments within the CSS.)

http://www.wturrell.co.uk/stackoverflow/20110615-01.html

The widths of elements inside the ‘page’ div add up to 100% exactly. I want to add padding to certain elements, in this case the nav. If I remove all the padding, they float correctly, but more than 1 or 2 pixels of padding (regardless of what units it’s specified in) and it breaks. I don’t understand why this is breaking the layout as it’s padding so surely shouldn’t alter the overall size of the block?

What have I missed?

Update – solution:
http://www.wturrell.co.uk/stackoverflow/20110615-02.html

(Element display width = width plus border plus padding. Navigation should be nominal 200 pixels in total with 20px padding on right, so for fluid design, width = 180/900*100 or 20%, padding = 20/900*100 or 2.222% and body text remains 700/900*100 or 77.777%.)

Answer 1

In the CSS box model, the padding is added to the width to get the overall size of the box. In your case, if the width percentages add up to 100%, even 1px would mean that the content overflows.

Try setting the padding in percentages and take that into account when adding them up or leave a buffer of 1 or 2 percent at the edges and add the small paddings in pixels.