Page 1 of 1

CSS

Posted: Thu Sep 22, 2005 10:43 pm
by anthony88guy
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?

Posted: Thu Sep 22, 2005 11:43 pm
by feyd
container div with header div and scrollable div inside..

Posted: Fri Sep 23, 2005 2:14 pm
by anthony88guy

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>
The reason for the missing 2% in height is because it would introduce a full window scroll, plus the selected area with a scroll.
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.