I hope some of you can help me.
I need the following lay-out:
- a header (at the top of course)
- a footer that stay at the bottom when the content is smaller than the browser window
- two columns (full height beacuse of background colours in the navigation) in the body div, one for navigation and one for content.
- and it has to be IE (6/7) and Firefox compatible
I have the part where the footer stays at the bottom in Firefox and IE, but I am at loss how to add the two columns next to each other and get the to full height of the window.
This my code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Volledig scherm gebruiken</title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
#navigation
{
/* ????? */
}
#content
{
/* ????? */
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header" >
Header
</div>
<div id="body">
<div id="navigation">
Navigation
</div>
<div id="content">
Content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</form>
</body>
</html>
I am looking for a solution without any javascript.
I hope you can help me.
Thx a lot !!