Hi, I'm a CSS noob, and I'm trying to implement a very basic layout but am
having problems in certain browsers.
Basically, I want a horizontally centred box with a fixed width of 750px,
with a 100px high header, a 50px high footer, and a contents box that grows
to fit the contents. I also want a margin at the top and bottom of the
centred box of a fixed height (30px).
I have the following HTML file which gives the desired results in Internet
Explorer 6, Mozilla 1.7.5, and Firefox 1.0 (all tested on Windows XP SP2).
However, in Opera 7.54, there is NO margin at the bottom of the window.
Instead, the footer hugs the bottom of the browser window. I've been trying
to work out why this is happening for a few days now, but I don't know
what's going on. What am I doing wrong?
Here is the code you can just copy into an HTML file to view the results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Test</title>
<style type="text/css">
html {
height: 100%;
max-height: 100%;
margin: 30px 0px;
padding: 0;
}
body {
height: 100%;
max-height: 100%;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
line-height: 1.5em;
color: #333;
background: #ddd;
}
#box {
height: auto;
width: 750px;
margin-left: auto;
margin-right: auto;
padding: 0;
font-size: 95%;
text-align: left;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #fff;
}
#header {
height: 100px;
padding: 0;
margin: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background-color: #EFF7FE;
}
#content {
margin: 0;
padding: 0px 20px;
}
#footer {
height: 50px;
margin: 0;
padding: 10px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color: #FFF;
background-color: #000;
}
</style>
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
