tags:

views:

40

answers:

3

Hello,

I practiced to center a div without a width and found a solution that works in every common browser. But when I put this solution into real page style, it wont work in IE.

The practice solution, that works perfectly in IE, Chrome and Firefox, looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <title>Centerbox</title>
    <link type="text/css" rel="stylesheet" href="centerbox.css" media="all" />
</head>

<body>
    <div class="centerbox-outer">
        <div class="centerbox-inner">
            <p>Sample content that is not fixed width</p>
            <p>Some more content</p>
            <form>
                <input type="text" name="sampleinput" />
                <input type="submit" name="go" />
            </form>
        </div>
    </div>
</body>
</html>

centerbox.css

div.centerbox-outer{
    text-align: center;
    margin: 0 auto;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    display: inline-block;
}

The page where it is not working with IE is here: [link removed]

Do someone have any idea, what I'm missing there?

+1  A: 

To center a div, use:

 margin-left: auto; 
 margin-right: auto;

in the css for the div. Also, I've found for IE, you may need to alter your DocType to an HTML 4 specification. Something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

I do these in my pages, and they center perfectly in IE.

GrandmasterB
A: 

div.centerbox-outer is 100% width, so putting margin: 0 auto; on it does not make any sense. If anything, you should put margin: 0 auto; on div.centerbox-inner.

jeroen
Ok, made the changes, but still no luck
kaupov
A: 

Made some research and found a suitable solution using relative positions. This seem to work perfectly in commonly used browsers.

The style would be following:

div.centerbox-outer{
    margin: 0 auto;
    float: left;
    left: 50%;
    position: relative;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    float: left;
    position: relative;
    right: 50%;
}
kaupov