3 replies [Last post]
JimF
JimF's picture
Offline
newbie
Last seen: 8 years 23 weeks ago
Timezone: GMT-5
Joined: 2012-02-26
Posts: 2
Points: 3

Hi all. I'm need to create a 3-row page. The trick is I need the first and second rows to be fixed and the 3rd row to use up the rest of the screen. What I'm trying to accomplish is:

row 1: fixed height/width/position banner
row 2: fixed height/width/position menu
row 3: variable height/fixed width body terminating at bottom of screen--with scroll bars if necessary

Thank You
Jim

------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 DTD/xhtml1-transitional.dtd">
 
<html>
<style type="text/css">
 
#header{
 float:center;
 top: 0px;
 margin-left: auto ;
 margin-right: auto ;
 width : 800px;
 color : #000000;
 height : 30px;
 overflow : hidden;
 background:#ffffff;
 }
 
#menu{
   float:center;
 top: 0px;
 margin-left: auto ;
 margin-right: auto ;
 width : 800px;
 color : #000000;
 height : 2em;
 overflow : hidden;
 background:#ffffff;
 }
 
 
 #content {
   position: relative;
 width : 100%;
 height : 100% ; 
 bottom:1px;
 bottom: 0;
 margin-left: auto ;
 margin-right: auto ;
 overflow : auto ;
}
 </style>
 
<head>
<title></title>
</head>
<body>
 
<div id="header">
  Header picture
</div> 
 
<div id="menu">
  <ul>
    <li><a href="http://www.gosomewhere.com" title="Home"><span>Home</span></a></li>
    <li><a href="http://www.gosomewhere.com/training" target="_self" title="Training"><span>Training</span></a></li>
    <li><a href="http://www.gosomewhere.com/testing" target="_self" title="Testing"><span>Testing</span></a></li>
    <li><a href="http://www.gosomewhere.com/otherproj" target="_self" title="Other Projects"><span>Other Projects</span></a></li>
  </ul>
</div>
 
<div id="content">
  body body body body body body body body body body body body body body body body body body body body body body body body body body body   
  body body body body body body body body body body body body body body body body body body body body body body body body body body body 
  body body body body body body body body body body body body body body body body body body body body body body body     </div> 
</body>
</html>

purvesweb
purvesweb's picture
Offline
Regular
Scotland
Last seen: 8 years 9 weeks ago
Scotland
Timezone: GMT+1
Joined: 2011-02-15
Posts: 13
Points: 27

Hi Jim Not sure if this will

Hi Jim

Not sure if this will help your issue but you might want to take a look at layouts using the below link, it has some very helpful information that may be of use.

If not, let us know!

http://css.maxdesign.com.au/floatutorial/

Cheers
Stevie

JimF
JimF's picture
Offline
newbie
Last seen: 8 years 23 weeks ago
Timezone: GMT-5
Joined: 2012-02-26
Posts: 2
Points: 3

3-Row CSS Frame

Steve,

I'm probably just slow, but I still can't get the 3rd frame to stop at the bottom of the browser window. In most of my attempts, it just extends to fit all of the data or it moves to very odd places in the window. I considered using java, but I don’t think it will work because the window can be resized or tool bars could be added. I appreciate any ideas.

Thanks
Jim

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 6 years 42 weeks ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

Hi it is helpful code

Hi
it is helpful code arrangement. i changed the structure of your code. use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
<style type="text/css">
 html{
 height:100%;
 }
 body{
height:100%;
}
#header{
 top: 0px;
 margin-left: auto ;
 margin-right: auto ;
 width : 800px;
 color : #000000;
 height : 30px;
 background:#ff0000;
 }
 
#menu{
 margin-left: auto ;
 margin-right: auto ;
 width : 800px;
 color : #000000;
 height : 2em;
 background:#00ff00;
 }
 
 
 #content {
 position: relative;
 width : 100%;
 height : 100%; 
background:#660066; 
}
 </style>
 
<title></title>
</head>
<body>
 
<div id="header">
  Header picture
</div> 
 
<div id="menu">
  <ul>
    <li><a href="http://www.gosomewhere.com" title="Home"><span>Home</span></a></li>
    <li><a href="http://www.gosomewhere.com/training" target="_self" title="Training"><span>Training</span></a></li>
    <li><a href="http://www.gosomewhere.com/testing" target="_self" title="Testing"><span>Testing</span></a></li>
    <li><a href="http://www.gosomewhere.com/otherproj" target="_self" title="Other Projects"><span>Other Projects</span></a></li>
  </ul>
</div>
 
<div id="content">
  body body body body body body body body body body body body body body body body body body body body body body body body body body body   
  body body body body body body body body body body body body body body body body body body body body body body body body body body body 
  body body body body body body body body body body body body body body body body body body body body body body body     </div> 
</body>
</html>

If not, tell us now!!!