CSS Div width percentage and padding without breaking layout

Question

There may be a simple fix for this  but it has troubled me for ages now       Let me explain the situation  I have a div with the ID  container  that holds all the contents in the page  including header and footer also  that will keep everything inline and I can do just 1 simple  margin 0 auto   instead of multiples  So lets say that I have the width of  container set to 80   Now if I put another div inside with the same width  80   and give it the ID of  header  with 10px of padding all around  the layout would  break   so to speak  because the page adds the padding amount onto the width  So  how can I make it stay in-bounds without using methods such as a lower percentage for the  header div  Basically  I want to make it fluid     Here is some example code to give you an idea of what I am talking about       CSS   container       position relative      width 80       height auto     header       position relative      width 80       height 50px      padding 10px      HTML   lt div id  container  gt       lt div id  header  gt Header contents lt  div gt   lt  div gt    Can anyone help me out with this issue that has been bugging me forever

User · Answer

You can also use the CSS calc   function to subtract the width of your padding from the percentage of your container s width   An example   width  calc  100   -  32px     Just be sure to make the subtracted width equal to the total padding  not just one half  If you pad both sides of the inner div with 16px  then you should subtract 32px from the final width  assuming that the example below is what you want to achieve    x000D   x000D   outer   x000D    width  200px  x000D    height  120px  x000D    background-color  black  x000D    x000D   x000D   inner   x000D    height  40px  x000D    top  30px  x000D    position  relative  x000D    padding  16px  x000D    background-color  teal  x000D    x000D   x000D   inner-1   x000D    width  100   x000D    x000D   x000D   inner-2   x000D    width  calc  100   -  32px    x000D    x000D   lt div class  outer  id  outer-1  gt  x000D     lt div class  inner  id  inner-1  gt  width of 100   lt  div gt  x000D   lt  div gt  x000D   x000D   lt br gt  x000D   lt br gt  x000D   x000D   lt div class  outer  id  outer-2  gt  x000D     lt div class  inner  id  inner-2  gt  width of 100  - 16px  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try removing the position from header and add overflow to container    container       position relative      width 80       height auto      overflow auto     header       width 80       height 50px      padding 10px

User · Answer

If you want the  header to be the same width as your container  with 10px of padding  you can leave out its width declaration   That will cause it to implicitly take up its entire parent s width  since a div is by default a block level element      Then  since you haven t defined a width on it  the 10px of padding will be properly applied inside the element  rather than adding to its width    container       position  relative      width  80       header       position  relative      height  50px      padding  10px      You can see it in action here     The key when using percentage widths and pixel padding margins is not to define them on the same element  if you want to accurately control the size    Apply the percentage width to the parent and then the pixel padding margin to a display  block child with no width set     Update  Another option for dealing with this is to use the box-sizing CSS rule    container        -webkit-box-sizing  border-box     Safari Chrome  other WebKit        -moz-box-sizing  border-box        Firefox  other Gecko        box-sizing  border-box             Opera IE 8             Since this element now uses border-box sizing  the 10px of horizontal        padding will be drawn inside the 80  width        width  80       padding  0 10px      Here s a post talking about how box-sizing works

[css] CSS Div width percentage and padding without breaking layout

Examples related to css

Examples related to padding

Examples related to fluid-layout