CODEWITHSUNDEEP
htmlcsscentermargin
user3716760
user3716760

Reputation: 25

margin:auto doesn't seem to work, can't figure it out

I'm trying to horizontally center the red "countdown" div, but it's not going my way. Have been stuck for hours but haven't yet found a single solution.

http://jsfiddle.net/737tM/

HTML:

<div id="container">

  <div id="countdownWrapper">
    <div id="countdown">

    </div>
  </div>

</div>

CSS:

body {
margin:0;
background:black;
overflow: hidden;}

#container {
height:100%;
width:100%;
z-index:-900;
position:fixed;
min-width:500px;}

#countdownWrapper {
width:100%;
height:100px;
bottom:0;
position:absolute;
display:block;}

#countdown {
margin-left:auto;
margin-right:auto;
display:block;
width:400px;
height:100px;
background-color: rgba(0, 0, 0, 0.5);
position:absolute;
z-index:1000;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background:red;}

Upvotes: 1

Views: 519

Answers (4)

Laura Schoebel
Laura Schoebel

Reputation: 114

If you change the code to:

#countdown {
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:400px;
    height:100px;
    background-color: rgba(0, 0, 0, 0.5);
    position:absolute;
    z-index:1000;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background:red;
    top: 0; left: 0; bottom: 0; right: 0;
}

it will work. The reason is that in the normal content flow margin: auto equals '0' for the top and bottom, in your case margin-left and margin-right are 'auto' so their value equals '0'. Position:absolute breaks the block out of the typical content flow rendering the rest of the content as if that block wasn't there. Setting top:0; left:0; bottom:0; right:0; gives the browser a new bounding box for the block.

Giving the block a width and height prevents the block from taking up all the available space and forces the browser to calculate margin:auto based on the new bounding box. Therefore: the margin of the absolute positioned element is then positioned inside these offsets. Since the block is absolutely positioned and therefore out of the normal flow the browser gives equal values to margin-left and margin-right centering the element in the bounds set earlier.

Hope this helps

Upvotes: 1

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

The problem with you div is the 

position:absolute;

property you have applied on the element named countdown.

Your center margining will work correctly if you just remove this property.

Also, contrary to the answer marked as the correct answer, margins DO apply on absolutely positioned elements. However, margins work differently on absolutely positioned elements as compared to statically positioned elements.

You need to learn how positioning works. Chris Coyier's article is certainly a good start -> http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/.

Hope this helps!!!

Upvotes: 2

Jo&#227;o Pinho
Jo&#227;o Pinho

Reputation: 3775

It's fixed here!

The problem was in the position absolute, margins can be calculated in absolute positioned elements, but when you do it, the margins are relative to the their position which is defined by left and top properties. Because you wanted it to be relative to the wrapper you needed to remove the absolute positioning from the countdown div. And that's it.

#countdown {
    margin: 0 auto;
    display:block;
    ...
}

Upvotes: 2

chris
chris

Reputation: 1184

remove your "position:absolute;" from countdown. Margins cannot be calculated on absolutely positioned elements.

Upvotes: 2

Related Questions