I want three rows, with a header, content and footer section. When the content is more than the window length, the header and footer are on the top and bottom; when the content is smaller, the footer is at the bottom of the window.
All three are contained within a 'frame' section that is 600px wide, is centered on the body, and has a couple of borders.
And it should be simple, but...?
The two pics in 'header' and 'footer' are meant to be inside the 'frame', and I can't work out why they are not (they are nested inside in the code). Oh, and I commented out the content div (with 'ahem') to show you the weird things that happen depending on whether the content div is there or not.
I think it's poor absolute positioning on my part, but is it possible to do what I want with relative?
Cheers
Ben
Code: Select all
#ahem
{
display: none;
}
/* Above causes the browser update text to be invisible, if read by a CSS browser */
body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #fff;
text-align: center;
}
#frame
{
margin: 0;
padding: 0;
height: 100%;
width: 600px;
border-left: 2px solid #039;
border-right: 2px solid #039;
background-color: #edf6ff;
}
#header
{
position: absolute;
margin: 0;
padding: 0;
height: 140px;
width: 600px;
top: 0;
}
#content
{
margin: 0;
padding: 0;
width: 600px;
text-align: justify;
}
#footer
{
position: absolute;
margin: 0;
padding: 0;
height: 71px;
width: 600px;
bottom: 0;
}Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>:.Broadband Yealmpton.:</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- CSS COMPATIBLE BROWSERS WILL NOT DISPLAY THIS: -->
<span id="ahem">
<center>
<h1>
This site will look much better in a browser that supports
<a href="http://www.webstandards.org/upgrade/" title="Download a browser that complies with Web standards." target="_blank">
web standards
</a>
, but it is accessible to any browser.
</h1>
</center>
<br>
<hr>
<br>
</span>
<!-- /END CSS COMPATIBILITY -->
<!-- main section -->
<div id="frame">
<div id="header">
<img src="title_bar.gif" alt="title_bar">
</div>
<div id="ahem">
content goes here
</div>
<div id="footer">
<img src="base_bar.gif" alt="base_bar">
</div>
</div>
<!-- /end main section -->
</body>
</html>