3

Why Is My Content Less Than 100% Width?

JSFiddle

http://jsfiddle.net/CSS_Apprentice/ru8f6/

HTML

<div class="container">
    <div id="header"></div>
    <div id="content">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <span class="stretch"></span>
    </div>
    <div id="footer"></div>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

#header {
    border: 1px solid black;
    width: 100%;
    height: 50px;
}

#content {
    border: 2px solid #444;
    height: 125px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding-right: 25px;
    padding-left: 25px;
}

#content > div {
    border: 1px dashed black;
    width: 100px;
    height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

#footer {
    border: 1px solid black;
    width: 100%;
    height: 50px;
}

I'm using the "Justify Text" trick to align my divs, but I doubt that's causing the issue. It's not a huge issue, but it just bugs me :)

Community
  • 1
  • 1
CSS Apprentice
  • 899
  • 1
  • 16
  • 29
  • 1
    In [this (closed) question](http://stackoverflow.com/questions/167531/best-practice-for-css-reset-style-sheet), you'll find the answers have some good pointers to various CSS "resets". Opinions vary on whether you should use one or not, but many designers do. You include them before your own CSS, and they help to "tame" browser default styles so you know you have a consistent starting point for your own code. Most of them, if not all, will remove default borders and padding like the one that caused you a problem here. – Matt Gibson Jun 14 '14 at 19:19

2 Answers2

6

Because the browsers' default stylesheet. The HTML body tag has a margin of 8 px by default. See here for lists on browsers' default stylesheets. And here for W3C's thoughts.

enter image description here

To "fix" this, give it a margin: 0;

body {
    margin: 0;
}
Community
  • 1
  • 1
Philipp Gayret
  • 4,870
  • 1
  • 28
  • 34
  • 2
    It would be more accurate to give credit (or blame!) to the people who design the default style sheets for the various browsers... – Marc Audet Jun 14 '14 at 18:58
  • @MarcAudet Updated the answer, I thought this was some standard instead, as pretty much all browsers seem to add the margin – Philipp Gayret Jun 14 '14 at 19:01
  • I never looked at App D of the spec before, well spotted! – Marc Audet Jun 14 '14 at 19:06
  • 5
    It *is* a good idea to give the body a default margin. It's very hard to read text when it is right up against the edge of the window frame. – Quentin Jun 14 '14 at 19:06
  • Luckily for us, all `p` have a `margin: 1.12em`! :-) – Philipp Gayret Jun 14 '14 at 19:08
  • @user1066946 - Like it says in in App D - "This appendix is informative, not normative". It was never intended to be a requirement to browsers, just documentation of an approximation of what browsers were doing anyway around the turn of the millennium. – Alohci Jun 14 '14 at 19:17
  • I posted this on the other answer as well. "I just tried margin: 0; in the JSFiddle, and that actually didn't fix it :/ I thought maybe it was because I didn't declare a width, so I tried width: 100% and that pushed my content section out of the body. Any ideas?" New JSFiddle: http://jsfiddle.net/CSS_Apprentice/ru8f6/2/ – CSS Apprentice Jun 16 '14 at 21:02
  • 1
    @CSSApprentice you're using `witdh:100%` with `border:1px`, the width does not include the border so it'll push it over. You could use outline or do some other tricks, [this has some answers here](http://stackoverflow.com/questions/3254587/when-1-px-border-is-added-to-div-div-size-increases-dont-want-to-do-that) – Philipp Gayret Jun 17 '14 at 07:10
  • @Philipp - Thank you, very helpful! I'm tracking now :) – CSS Apprentice Jun 17 '14 at 19:00
1

Style needs to be presented, regardless of if you specified a style or not. Thus, if you never specified how much margin or padding the body (or any other elements such as: paragraph or h1) should have, the browser must still somehow make a decision on how to display it.

You might think that it would make sense to have all unspecified values to automatically equal to zero, but (for example) to have absolutely no spacing in between paragraphs, might be rather unreasonable. Thus, there are default values for certain elements (in this case for the body element), and since you didn't specify the margin value for the body element, it took on the browser's default value.

In an effort to make many of these default values equal to zero, some people decide to start their CSS off with a "reset", which is effectively the same thing as just setting a bunch of things to the values that you feel is logical as a default starting point (usually a value of zero). Check out Eric Meyer's css reset for example. http://meyerweb.com/eric/tools/css/reset/

After the reset, you should specify by overwriting the code that was already set at the above "reset" section.

All in all, if you had set:

body {
    margin: 0;
}

It would make your content look like it's 100%, but you'll constantly run into the same problem if you don't grasp the idea that there are default values set, and that if you don't specify the values yourself, then the browser's default is the next best value to take on.

moto
  • 194
  • 3
  • 13
  • I just tried margin: 0 in the JSFiddle, and that actually didn't fix it :/ I thought maybe it was because I didn't declare a width, so I tried width: 100% and that pushed my content section out of the body. Any ideas? – CSS Apprentice Jun 16 '14 at 20:56
  • @CSSApprentice You'll notice that you put a padding-right and padding-left of 25px; in your content. this will make the content box have a padding of left and right 25px. A few things to mention. If you want your box1, box2 to flush to the left and right, take off the padding on #content. make it padding:0. before you do that, you can put a background-color:blue; on #content and you'd see that content is actually 100%, the padding is making you feel like it's not, but the content is actually flushing to the left and right, even without the padding adjustment. – moto Jun 16 '14 at 22:10
  • So, to state once more, you are likely seeing those boxes and because the boxes are not flushing to the right and left, you might feel that the #content (which is the thing that is currently containing the boxes) is not 100%. But content is actually 100% right now. The padding left and right on Content is making the boxes move away from the left and right side, making you feel like it's not 100%. Which is why I thought you should first try putting a background-color:blue; within Content, so that you could see that the content box is actually 100% at the moment, without any padding adjustments. – moto Jun 16 '14 at 22:13
  • Thank you! It was the border that lead me to believe the #content was off. Do you know why the right content border appears off? New JSFiddle with bgcolor: http://jsfiddle.net/CSS_Apprentice/ru8f6/3/ – CSS Apprentice Jun 16 '14 at 23:02