Padding stretches a div

Question

I have a div that I want to be 99% of the page and have the text start 1em away from the edge of the box. Below is my coding. Once I add the 1em padding, it stretches the div to wider than the page. I don't want to use fixed widths because I'm trying to make this look good on phones and tablets of various resolutions.

How can I make all text in the box start away from the edge and the box size not change?

#contents {
    float: left;
    width: 99%;
    border-radius: 1em;
    margin: .5% .5% .25% .5%;
    padding-left: 1em;
    background-color: #B7ECFF;
}

possible duplicate of [Padding of a certain percentage of screen width](http://stackoverflow.com/questions/14022063/padding-of-a-certain-percentage-of-screen-width) — Diodeus - James MacFarlane, Jul 12 '13 at 19:18

EmmanuelRC · Answer 1 · 2013-07-12T19:44:35.013

1

Use a wrapper to contain your main content, like:

HTML:

<div id="wrapper">
    <div id="contents">
        some text
    </div>
</div>

CSS:

#wrapper {
    float: left;
    width: 99%;
    border-radius: 1em;
    margin: .5% .5% .25% .5%;
    background-color: #B7ECFF;
}
#contents { padding-left: 1em; }

http://jsfiddle.net/F9Gn9/2/

edited Jul 12 '13 at 19:44

answered Jul 12 '13 at 19:38

EmmanuelRC

348
1
6

score 1 · Answer 2 · answered Jul 12 '13 at 22:14

1

If I understood your question right box-sizing: border-box might be what you are looking for:

http://jsfiddle.net/SbkzB/

answered Jul 12 '13 at 22:14

MiRaIT

149
3

score 0 · Answer 3 · answered Jul 12 '13 at 19:17

Use a percentage as your padding and the change the width of the page based on the percentage you used for the padding. Ex:

#contents {
    float: left;
    width: 98%;
    border-radius: 1em;
    margin: .5% .5% .25% .5%;
    padding-left: 1%;
    background-color: #B7ECFF;
}

score 0 · Answer 4 · answered Jul 12 '13 at 19:39

0

I removed the padding-left form div#contents, is this what your looking for?

http://jsfiddle.net/HS23V/1/

answered Jul 12 '13 at 19:39

Raymond

44
3

Padding stretches a div

4 Answers4