simple centered div, without success

Forum Moderators: not2easy

Message Too Old, No Replies

simple centered div, without success

dmd_anfini

7:31 pm on Feb 15, 2010 (gmt 0)

Hi, I'm trying to make a simple thing using html + css, center a div box in the middle of the browser screen. I wish to have it always centered, for any wbrowser window size. Here is the html code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="testcss.css" />
</head>
<body>

<div id="main">
</div>


</body>
</html>

and here is the css


* {
padding: 0;
margin: 0;
border: 0;
}

html{
width: 100%;
height: 100%;
}

body {
background-color: rgb(200,200,200);
width:90%;
height: 90%;
padding:5%;
}

#main {
background-color: rgb(0,255,0);
width: 100%;
height: 100%;
}

It does center the box, but it makes the body of the page larger than 100% of the browser screen space, and vertical scroll bar appears. I thought that 100% height would be relative to the browser current screen size, but in this case it is not.

Why is this happening?

bzgzd

3:39 am on Feb 16, 2010 (gmt 0)

[w3.org...]
There it says:
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'

So your body has 5% padding and for all 4 sides it will be same and it will be 5% from html width.
Which I didn't know before because I never used % for padding or margin...

If you do not absolutely require vertical centering fixed size padding on top can be sufficient:
padding: 30px 5% 0 5%;

or using auto margin on sides like
margin: 30px auto 0 auto;

Because I think vertical percentage centering is not easy to achieve. (maybe using table...?)

Also I think it is not usual to center <body> in <html>. Mostly what I see are <div> page wrappers or containers that are centered (with margin: 0 auto) and body covers whole browser window.

dmd_anfini

4:54 am on Feb 16, 2010 (gmt 0)

so, if the padding-top and padding-bottom depends on the width of the containing block, I understand it is impossible to define the exact padding-top% to achieve what I want, because the width of the containing block is a percentage, not a fixed pixel size. So when you're summing padding-top = 5% + height = 90% + padding-bottom = 5%, it will not give 100% height... it will give more than 100% height if the width of the containing block is bigger than his height

This is so confuse, why would the spec define the padding-top % and padding-bottom % relative to the width of the containing block? It's so counter-intuitive

I found this solution on google. This gives me what I want


* {
padding: 0;
margin: 0;
border: 0;
}

html {
background-color: white;
width: 100%;
height: 100%;
}

body {
background-color: rgb(200,200,200);
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: 90%;
padding: 5%;
}

#main {
background-color: rgb(0,255,0);
width: 100%;
height: 100%;

}