title: Troubleshooting CSS padding in responsive design
body: <p>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.) </p>
  
  <p><a href="http://www.wturrell.co.uk/stackoverflow/20110615-01.html" rel="nofollow">http://www.wturrell.co.uk/stackoverflow/20110615-01.html</a></p>
  
  <p>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?</p>
  
  <p>What have I missed?</p>
  
  <p><strong>Update - solution:</strong>
  <a href="http://www.wturrell.co.uk/stackoverflow/20110615-02.html" rel="nofollow">http://www.wturrell.co.uk/stackoverflow/20110615-02.html</a></p>
  
  <p>(Element display width = width <strong>plus</strong> border <strong>plus</strong> 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%.)</p>