Home/ Questions/Q 921235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T18:50:31+00:00

I practiced to center a div without a width and found a solution that

  • 0

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">
<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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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%;
}
    • 0