L.S.,
I'm trying to make a layout which is completely fixed in width and
height if needed by using three divs rows (header, content, footer)
which have each 3 div again to be able to play around better with the
webdesign.
The problem is that I need the content div row to nudge up
automatically to the header div row, independantly of the header
height. The same goes for the footer/content div row.
Any suggestions how to do this?
Thank you for your time!
KoosHopeloos
The CSS/XHTML-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Copyright JNvB</title>
<style type="text/css">
/* header */
..headerrow {
position: absolute;
top: 0px;
}
..logo {
position: absolute;
margin-left: 0px;
height: 200px;
width: 200px;
background-color: #0000FF;
}
..header {
position: absolute;
margin-left: 200px;
height: 200px;
width: 565px;
background-color: #00FF00;
}
..empty1 {
position: absolute;
margin-left: 765px;
height: 200px;
width: 5px;
background-color: #FF0000;
}
/* end header */
/* content */
..contentrow {
position: absolute;
top: 205px;
}
..menu {
float: left;
width: 200px;
background-color: #00FF00;
}
..content {
float: left;
width: 565px;
background-color: #FF0000;
}
..empty2 {
float: left;
width: 5px;
background-color: #0000FF;
}
/* end content */
/* footer */
..footerrow {
position: absolute;
top: 250px;
}
..totop {
position: absolute;
margin-left: 0px;
height: 100px;
width: 200px;
background-color: #FF0000;
}
..footer {
position: absolute;
margin-left: 200px;
height: 100px;
width: 565px;
background-color: #0000FF;
}
..empty3 {
position: absolute;
margin-left: 765px;
height: 100px;
width: 5px;
background-color: #00FF00;
}
/* end footer */
</style>
</head>
<body>
<div class="headerrow">
<div class="logo">logo</div>
<div class="header">header</div>
<div class="empty1">empty1</div>
</div>
<div class="contentrow">
<div class="menu">menu</div>
<div class="content">content</div>
<div class="empty2">empty2</div>
</div>
<div class="footerrow">
<div class="totop">totop</div>
<div class="footer">footer</div>
<div class="empty3">empty3</div>
</div>
</body>
</html>
