Question

Attempting to create a fixed box in the centre of my page (lime box in example)

I can’t work out why the box won’t center within the page as it has a margin of auto, I’m assuming this is something to do with it’s fixed positioning?

#countdownHolder{
    width:700px;
    height:250px;
    margin: 0 auto;
    position:fixed;
    background-color:#0F0;
    z-index:21;
    text-align:center;
}

Live example: http://www.rubytuesdaycreative.co.uk/

EDIT: Just to add I do want the div to be fixed within the middle of the page, I just want it to be centred.

Answer 1

Try this:

#countdownHolder {
    background-color: #00FF00;
    text-align: center;
    margin-left: -350px;
    position: fixed;
    left: 50%;
    height: 250px;
    width: 700px;
    z-index: 21;
}