By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,077 Members | 1,790 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,077 IT Pros & Developers. It's quick & easy.

<div>: can't get content under header

P: n/a
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>

May 3 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Sorry, posted code iso link, but here it is:

http://osinijsland.50webs.com/test_3.htm
May 3 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.