Geek asks and answers

How can I focus on percentages?

As an experiment, I tried to center the DIV in the BODY tag using percentages in CSS. I think I realized this at some point, but thanks to TopStyle's magic, which has no history, after you saved it, 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 questions:

Why am I using absolute field positioning?
So the box will take 80%, because it will stretch even without contents.

, ?
, DIV 80% , . , , , , , 740 , . , , 80% .

, 10% . "margin: 10%;" BODY, "padding: 10%;" BODY , , "margin: 10%" DIV. : , . . , , , DIV, , 80% .

, . DIV 80%, 10% (20% 20% ), 100%. , .

, , .

- , ?

!

+3
2

:

*
{
    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 DIV , min-width min-height .

+4

position:absolute; #box

#box - margin:0 auto;

body

JSFiddle Demo

JSFiddle

0

More articles:


All Articles