2

I try to center a div on my page. It should use just relative values, so its size depends just on the window size.
I found a solution and it centers the box, but it seems that the margin isn't calculated correctly. Instead the size of the body gets bigger then the window. In the following example firebug tells me that the box #container has size 1265x335 on my screen. When inspecting #content its size is 506x134 and 2px boarder on each side, which matches my calculation. But the top margin is 316.

Have I got something wrong?
The margin should be 25% of 335, right?
How can I fix this?

Here's the HTML:

<body>
  <div id="container">
    <div id="content">
      nothing...
    </div>
  </div>
</body>

And here the CSS:

html {
  height:            100%;
}

body {
  height:            100%;
  margin:            0em 0em 0em 0em;
}

#container {
  height:            100%;
}

#content {
  text-align:        center;
  width:             40%;
  height:            40%;
  margin-top:        25%;
  margin-left:       auto;
  margin-right:      auto;
  margin-bottom:     auto;
  border:            2px solid black;
}
Scolytus
  • 16,338
  • 6
  • 46
  • 69

1 Answers1

6

From http://www.w3.org/TR/CSS2/box.html:

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.

So you get 25% of 1265 which explains the behavior you are seeing. Unfortunately, I don't have any solutions to offer.

Edit: CSS3 makes this statement dependent on whether the containing block is horizontal (you would want it to be vertical). I don't think that any browsers implement the required block-progression property however (it might have unintended side-effects anyway).

Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126