4 replies to this topic

[ChadGregory]

I am creating my first responsive website.

My site has a wrapper that has the following css:

#wrapper {
width: 100%;
max-width: 1230px;
margin: 0 auto;
background: #e0dfdf;
}

and I would like to have this element have a padding of 15px but when i apply that style the width of the element increases by 15px when i want it to stay at for example the max-width of 1230px.

Any suggestions?

[Beeeeney]

Why don't you take 15px off the max-width?

[ChadGregory]

Why don't you take 15px off the max-width?

Thanks for pointing out the obvious lol I should have thought of that

[haku]

You may find discrepancies with IE (or another browser if you're testing in IE) if you just remove the value from the max-width. If so, then you can put a div inside the wrapper, and give it a 15px side margin.

[Scott_S]

to understand why that is happening read up on box model http://www.w3schools...ss_boxmodel.asp and to control it with box-sizing http://www.w3schools..._box-sizing.asp