CODEWITHSUNDEEP
htmlcssfirefoxmargincenter
AlbrightK
AlbrightK

Reputation: 73

Div not centering on certain browsers

Over the past few weeks I've been developing a website for a friend of mine and while it works perfectly in most browsers, it breaks in 2 seperate ones.

I have a div, with css of 

#div2 {
    width: 70%;
    margin: 0 auto;
    display: block;
    text-align: center;
}

In Chrome, Opera, Internet Explorer and many other browsers, it loads fine, and centers the div. But in Firefox and Safari (Both on windows), the div stays on the left of the page.

div2 IS inside a parent div, but the parent div only has a border set on it, nothing else.

I've been trying for ages to rectify the issue, even using the @-moz-document url-prefix() css, but it still doesn't fix it.

Any suggestion would be gratefully recieved.

Upvotes: 0

Views: 303

Answers (3)

Tobias
Tobias

Reputation: 53

A Firefox moderator already gave a solution:

#div2 {
    border: thin solid #000000;
    width: 760px;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 0

MaKR
MaKR

Reputation: 1892

Try specifying "width: 100%" on the parent div. This same issue happens when there isn't a container div, and the solution is specify "html, body {width: 100%}", so this is likely the same case.

Upvotes: 1

Gary Hayes
Gary Hayes

Reputation: 1788

Use:

{
left:50%;
margin-left:-200px; //minus half of your div width
}

Upvotes: 0

Related Questions