CODEWITHSUNDEEP
htmlcsspositioningcentervertical-alignment
Dom
Dom

Reputation: 3

Vertical centering using negative margins, works in Safari but not in Firefox/Chrome, any ideas?

I've been searching to find someone who has had a similar problem to me:

http://dominicburton.co.uk/soas/

The website I'm working on renders fine in Safari but not in Chrome or Firefox.

Firefox sees the style but only renders the negative top margin not the top:50%.

#wrapper {
margin-top: -245px;
position: relative;
top: 50%;
}

Does anyone know why this is happening? I've pretty much run out of ideas...

Upvotes: 0

Views: 3660

Answers (2)

mylesagray
mylesagray

Reputation: 8869

Vertical Align Demo

CSS

#wrapper {height:490px;
margin-top: -245px; /* Negative Half Height */
position: absolute;
top: 50%;
}

Source

This should be relatively easy to implement, your DIV layout is basically 100% there,

P.S. nice design man!

Upvotes: 0

Hussein
Hussein

Reputation: 42818

You need to use absolute positioning, add a height and margin should be half the height negated. Check it out here http://jsfiddle.net/CYKwM/

#wrapper {
    height:490px; /* you need to specify a height*/
    width:490px;
    margin-top: -245px; /*negative half the height*/
    position: absolute; /*change to absolute*/
    top: 50%;
    background:red;
}

Upvotes: 1

Related Questions