Here is an example of an html page that consists of a header and a footer and a div that contains another div which contains some content:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Testing 123</title>
<link rel="stylesheet" href="css/testing.css">
</head>
<body>
<div id="main_body">
<div id="header"></div>
<div id="content_container">
<div id="content">
Some text<br>
</div>
</div>
<div id="footer"></div>
</div>
</body>
Here's the css:
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
z-index: 10;
font-family: Arial;
font-size: 20px;
text-decoration: none;
text-align: left;
}
html, body {
height: 100%;
background-color: rgb(255, 255, 255);
}
#main_body {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 20px 0px 20px;
}
#header {
position: absolute;
top: 20px;
left: 0px;
height: 50px;
width: 100%;
background-color: rgb(40, 40, 40);
}
#content_container {
padding: 80px 10px 50px 10px;
}
#content {
padding: 0px 4px 0px 4px;
position: relative;
}
#corner_top_left {
position: absolute;
width: 7px;
height: 7px;
top: 0;
left: 0;
background-color: rgb(40, 40, 40);
}
#footer {
position: absolute;
bottom: 20px;
left: 0px;
height: 20px;
width: 100%;
background-color: rgb(40, 40, 40);
}
Notice that I haven't yet used style corner_top_left. I want to have nice round corners for content. I know there are lots of different ways to achieve this. I choose to have a container of relative position in which you can set absolutely positioned small corner divs. This method works fine for me but has one very strange effect in IE7 in this particular example that I cannot explain.
Watch what happens when you add the content_top_left div to the example, like this:
....
<div id="header"></div>
<div id="content_container">
<div id="content">
<div id="corner_top_left"></div>
Lots of text<br>
</div>
</div>
<div id="footer"></div>
....
For some reason the width of the footer is now adjusted (it's shorter). I have no clue why this happens in IE7 (works fine in FF). The footer should not be effected by the contents of content. Does anybody no what is happening here and how to solve this?
EDIT: I changed the example a bit to make it more similar to my current website.