globex
02-03-2008, 11:29 PM
Hello,
I'm trying to make a CSS Layout with a fixed header at the top and a fixed footer always at the very bottom of the page. In the middle, the container is supposed to have 100% and inside the container will be elements (also with 100%, but this time relative to the container).
As soon as I create elements inside the container with 100% height, my layout stretches beyond 100% of the browser window. Any ideas?
<html>
<style>
html, body {
background: black;
height: 100%;
margin: 0;
padding: 0;
}
#Header {
background: green;
height: 60px;
min-width: 1025px;
width: 100%;
}
#Wrapper {
background: white;
margin: 0 auto;
padding: 0;
position: relative;
overflow: hidden;
width: 1024;
}
#MainTable {
background: yellow;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: 644px;
}
#SideBar {
background: orange;
float: right;
height: 100%;
margin: 0;
padding: 0;
width: 275px;
}
#Footer {
background: red;
bottom: 0;
height: 80px;
position: absolute;
width: 100%;
}
</style>
<body>
<div id="Header"></div>
<div id="Wrapper">
<div id="MainTable"></div>
<div id="SideBar"></div>
</div>
<div id="Footer"></div>
</body>
</html>
I'm trying to make a CSS Layout with a fixed header at the top and a fixed footer always at the very bottom of the page. In the middle, the container is supposed to have 100% and inside the container will be elements (also with 100%, but this time relative to the container).
As soon as I create elements inside the container with 100% height, my layout stretches beyond 100% of the browser window. Any ideas?
<html>
<style>
html, body {
background: black;
height: 100%;
margin: 0;
padding: 0;
}
#Header {
background: green;
height: 60px;
min-width: 1025px;
width: 100%;
}
#Wrapper {
background: white;
margin: 0 auto;
padding: 0;
position: relative;
overflow: hidden;
width: 1024;
}
#MainTable {
background: yellow;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: 644px;
}
#SideBar {
background: orange;
float: right;
height: 100%;
margin: 0;
padding: 0;
width: 275px;
}
#Footer {
background: red;
bottom: 0;
height: 80px;
position: absolute;
width: 100%;
}
</style>
<body>
<div id="Header"></div>
<div id="Wrapper">
<div id="MainTable"></div>
<div id="SideBar"></div>
</div>
<div id="Footer"></div>
</body>
</html>