All geek questions in one place

Center horizontal div with variable width not working in IE

I practiced centering divs without width and found a solution that works in every common browser. But when I put this solution in a true page style, it will not work in IE.

A practical solution that works fine in IE, Chrome, and Firefox is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 does not work with IE is here: [link removed]

Does anyone have any ideas what I'm missing there?

+3
source share
3 answers

I did some research and found a suitable solution using relative positions. This seems to work fine in widely used browsers.

:

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%;
}
+9

div, :

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

css div. , IE, DocType HTML 4. - :

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

, IE.

0

div.centerbox-outeris 100% of the width, so overlapping margin: 0 auto;it makes no sense. Anyway, you should put margin: 0 auto;in div.centerbox-inner.

0
source

Source: https://habr.com/ru/post/1753759/

More articles:


All Articles