Padding is creating unwanted whitespace to the right

[jess_hello]

I am trying to make a div which is width:100%; sit 30px within the left and right edges of the browser – which is working…

But unfortunately when applying padding-left:30px; and padding-right:30px; to the div I am getting 30px of unwanted whitespace appearing to the right of the div which then makes the browser scrollable to the right when it shouldn’t have a scroll bar / be able to scroll (as all objects are within the viewable browser window nothing should be overflowing).

Does anyone have any tips to what I need to do to stop this from happening?

Other code applied to the div:
float:left;
display:block;

Any help is much appreciated!

Thanks :)

[bochristensen]

You could use the css calc() function, like shown in this codepen (Click on edit to view the code):

http://codepen.io/rexprovo/pen/LEbdNL

https://css-tricks.com/a-couple-of-use-cases-for-calc/

Or take a look at box-sizing: https://css-tricks.com/almanac/properties/b/box-sizing/

[Paulie_D]

Is there some reason you can’t just add 30px padding to the body?

The .main div is the 100% wide of the ‘remainder’ by default. Simple really….no need to overthink it.

http://codepen.io/Paulie-D/pen/rajaYJ

[Senff]

Use box-sizing:border-box. Adding any padding will not add to the total width of the div.

http://codepen.io/senff/pen/YPNXqy

[Author]

Posts