Home/ Questions/Q 4044700
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T13:19:26+00:00

As an experiment, I’ve been trying to center a DIV in a BODY tag

  • 0

As an experiment, I’ve been trying to center a DIV in a BODY tag using percentages in CSS. I think I had it figured out at one point, but thanks to the magic of TopStyle not having a history once you save, I lost it.

So, here is my HTML:

<html>
    <head>
        <link href="shadow.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

And, here is my CSS:

*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: #EEEEEE;
    margin: 10%;
}

div#box
{
    position: absolute;
    background-color: #FFFFFF;
    width: 740px;
    min-width: 80%;
    min-height: 80%;
    border: #CCCCCC thin solid;
}

To answer your immediate questions:

Why am I using absolute positioning on the box?
So that the box will accept 80% as it’s height even without content to stretch it.

Why am I width, min-width and min-height like this?
Since I want the box DIV to take up 80% of the available space, it made sense to use minimums. I’m using a pixel width to make sure that no matter how small the area gets, it won’t go any thinner than 740px, causing the browser to activate the horizontal scroll bar. In theory, they content height should activate the vertical scroll bar if the content pushes passed 80% of the available area.

Now the trick is to get it dead centered and maintain a 10% space around the box. I’ve tried applying “margin: 10%;” to BODY, then “padding: 10%;” to BODY, and finally “margin: 10%” to the box DIV. All of those choices gives me the same result: it’s centered horizontally but is acting strange vertically. I’m not getting even space on all sides. The only thing that is behaving as wanted is that the box DIV does appear to be using 80% of the available space.

It seems like this should be right. The box DIV is taking up 80%, the margins are taking up 10% on each side (20% vertically and 20% horizontally), making 100%. Not sure why it’s not working.

I swear I had this working in a similar manner, and now I’ve lost it.

Does anyone have an explanation as to why the percentages don’t seem to be displaying correctly and what solution I would need?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try it like this:

    *
{
    margin: 0;
    padding: 0;
}

body { background-color: #EEEEEE; }

div#box
{
    position: absolute;
    border: #CCCCCC thin solid;

    top: 10%;
    left: 10%;

    width: 80%;
    height: 80%;

    min-width: 740px;
    min-height: 500px;    
}

    IE will allow for the DIV to shrink below your limits since min-width and min-height do not work.

    • 0