I’m trying to make a layout that has a top header of about 100px in height and 100% in width. Under that is the rest of the page in a overflow: auto style. This would only work if i define a height, I can’t do 100% because of the header, and all users use a different res.
My goal is to have a top header that stays there and have the main content underneath scrollable.
Any suggestions to achieve this layout?
CSS
Moderator: General Moderators
-
anthony88guy
- Forum Contributor
- Posts: 246
- Joined: Thu Jan 20, 2005 8:22 pm
Code: Select all
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#333333" style="margin: 0px;">
<div style="width: 100%;">
<div style="width: 100%; height: 8%; background-color: #333333; border-bottom: 5px solid #000000;" align="center">
<font size="6">HEADER</font></div>
<div style="width: 100%; height: 90%; background-color: #666666; overflow: auto;">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>
</body>
</html>This works in fire fox but you cant scroll with the wheel. In IE its all messed up, doesn’t want to keep the header at the top.
Any ideas? I don’t want to use frames. Possibly something compatible with most browsers.