100% width div with padding showing horizontal scrollbar

Question

I have this CSS Code:

.topBar {
    width:100%; 
    height:70px;
    position:absolute;
    /*position:fixed;
    z-index:999;*/
    top:0; 
    left:0; 
    padding:10px;
    color:#000000;
    background-color:#eeeeee;
    border-bottom:2px solid #F36F25;
}

but because it is 100% wide and has a 10px padding it shows a horizontal scroll bar.

how can i stop this from happening but keep the padding and 100% width?

I have tried:

overflow-x: none;

in my css but i still want the horizontal scrollbar to show when the screen gets too small

Answer 1

Basically the div.topBar is 100% + 10px (x2). So it's actually more than 100% (hence the scroll box). The general way to do this is the add another div inside the parent div and add the padding:10px to that. Another way is to use box-sizing:border-box which actually honours the 100% rule!

Take a look at this sample.

Answer 2

You can use the box-sizing CSS property. Add this to .topBar : box-sizing:border-box;

.topBar {
    width:100%; 
    height:70px;
    position:absolute;
    /*position:fixed;
    z-index:999;*/
    top:0; 
    left:0; 
    padding:10px;
    color:#000000;
    background-color:#eeeeee;
    border-bottom:2px solid #F36F25;
    
    box-sizing:border-box; /** <- Add this **/
}

<div class="topBar"></div>

This property includes padding (and borders if you have some) in the width you set to the element. so if you set width: 100%; it won't overflow the parent container anymore.

More info about box-sizing on MDN