Search code examples
htmlcsswidthpadding

Padding causes horizontal scroll - it increases the width

Please look at this code:

<html>
<head>
<style type="text/css">
html, body{
width:100%;
height:100%;
margin:0px;
}

#header{
width:100%;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}
</style>
</head>
<body>
    <div id="header">
         <div id="header-container">
         </div>
    </div>
</body>
</html>

here is the demo . The header must have 100% width and 10px padding from left,right and bottom. please look at this picture

enter image description here

this is the layout of #header by firebug. as you can see the right padding is not in the image because the 10px padding is added to the #header width (you can test it). how can I set 100% width for #header and 10px padding for left,right and bottom without increasing the width?

Solution

  • try this

     * , *:before, *:after{ 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     -ms-box-sizing:border-box;
   }

    or

     #header{
 width:100%;
 height:100px;
 position:fixed;
 display:inline-block;
 background-color:red;
 padding:0 10px 10px 10px;
 box-sizing:border-box;  /** add this **/
 -moz-box-sizing:border-box; /** add this **/
 -webkit-box-sizing:border-box; /** add this **/
 -ms-box-sizing:border-box; /** add this **/
}