Relative positioning at width 100% doesn't make the content go edge to edge

Question

I've been facing this problem many times and I decided to ask. When I use relative positioning with width:100%, the content doesn't go edge to edge of the screen. On the other hand, when I use absolute or fixed positioning, the content does go edge to edge. Why is this? Here's a sample code to show my problem:

#container {
  display: block;
  width: 100%;
  position: relative;
  height: 150px;
  border: 1px solid;
  text-align: center;
}

<div id='container'>
  <br />
  <br />^
  <br />
  <- Why do I have these spaces? ->
    <br />\/
</div>

Result: enter image description here

What I want: enter image description here

While Googling, I did come across this page, but it looks like this problem was caused by not applying text-align: center.

You need to look up `padding` and `margin`. – Sani Huttunen Nov 17 '14 at 19:24 — Sani Huttunen, Nov 17 '14 at 19:24

emmanuel · Accepted Answer · 2014-11-17T19:35:53.213

9

You have to reset default body margin / padding.

box-sizing: border-box; will also help to include border size in width calculation.

body {
  margin: 0;
  padding: 0;
}
#container {
  display: block;
  width: 100%;
  position: relative;
  height: 150px;
  border: 1px solid;
  text-align: center;
  box-sizing: border-box;
}

<div id='container'>
  <br />
  <br />^
  <br />
  <- Why do I have these spaces? ->
    <br />\/
</div>

Reference: body Typical default display properties - box-sizing

edited Nov 17 '14 at 19:35

answered Nov 17 '14 at 19:24

emmanuel

9,607
10
25
38

2

I usually start my CSS with `* { margin: 0; padding: 0; }` to reset all elements. – huysentruitw Nov 17 '14 at 19:28
That is also an option. – emmanuel Nov 17 '14 at 19:28
Why aren't the margin and padding of the body set to 0 in the first place? I don't see the benefits for setting margin or padding to a value that is not 0, and it confuses newbies like me. – Tetsudou Nov 17 '14 at 19:33
1

This post may help you: http://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do – emmanuel Nov 17 '14 at 20:13

score 2 · Answer 2 · answered Nov 17 '14 at 19:54

I second emmanuel's response, and the ultimate answer is to clear all default styles with a CSS reset: http://meyerweb.com/eric/tools/css/reset/

You ask in the comment why there is a non-zero value for margin and padding there. There are lots of styles in place by default in your browser such as font-sizes and weights on headings, list style types, etc..

The problem is that browsers don't always render these default styles precisely the same. To combat this, many people have been using a CSS reset (Eric Meyer's version above is the canonical one) that clears out every default style. Be careful the first couple of times you do this, however, because it really clears out everything. This means no padding on ul tags, no padding on anything, no numbers on ol items.

Relative positioning at width 100% doesn't make the content go edge to edge

2 Answers2

Linked