Welcome to WebmasterWorld Guest from 54.159.240.93

Forum Moderators: not2easy

100% Height Document Template Layout

   
5:08 am on Mar 6, 2010 (gmt 0)

5+ Year Member



Hi all, I have been trying to complete a layout that has a 70px header which spans 100% across the screen at the top, has a left bar for secondary nav of 200px width, and fills the remaining vertical space, a right/main div which fills all remaining vertical and horizontal space, which also has a div at the bottom of that div which sticks to the bottom of screen.

If that makes sense, I think I am relatively close, except for a few bugs. The footer and right divs don't fill the horizontal space, and the left and right divs leave 70px beneath the screen base because of the header height. If anyone could find a solution, my code is below. Thanks heaps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
body {margin:0; padding:0; height:100%;}
#main{position:absolute; left:0; top:0px; padding:0; width:100%; height:100%; color:#333; background:#d1d1d1; margin:0 0 0 0;}
.header{height:70px; background-color:#000033; color:#fff;}
.footer{position:absolute; bottom:0; background-color:#333; color:#FFF; height:50px;}
.left{float:left; width:200px; height:100%; background-color:#ff0000;}
.right{float:left; width:auto; height:100%; background-color:#999;}
</style>
</head>

<body>
<div id="main">
<div class="header">Header</div>
<div class="left">Left</div>
<div class="right">Right
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
2:30 pm on Mar 7, 2010 (gmt 0)

5+ Year Member



You'd be better to work in em, but if you insist on px, here you go.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
body {margin:0; padding:0; height:100%;}
#main{position:absolute; left:0; top:0; padding:0; width:1000px; height:1000px; color:#333; margin:0;}
.header{position:absolute; left:0; top:0; width:100%; height:7%; background-color:#000033; color:#fff;}
.left{position:absolute; left:0; top:7%; width:20%; height:93%; background-color:#ff0000;}
.right{position:absolute; left:20%; top:7%; width:80%; height:88%; background-color:#999;}
.footer{position:absolute; left:20%; top:95%; width:80%; height:5%; background-color:#333; color:#FFF;}
</style>
</head>

<body>
<div id="main">
<div class="header">Header</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="footer">Footer</div>
</div>
</body>
</html>


--edit--
Oops! Got some of my % wrong. Now it's right.
11:03 pm on Mar 7, 2010 (gmt 0)

5+ Year Member



Ok, so two final items remain. I need the left element to be a fixed width of 200px, and the header a fixed height of 70px. This unfortunately will not work by simply changing the current values. Also if anyone knows how to disable the vertical scroll bars in Mozilla, that would be handy also. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
body {margin:0; padding:0; height:100%; width:100%;}
#main{position:absolute; left:0; top:0; padding:0; width:100%; height:100%; color:#333; margin:0;}
.header{position:absolute; left:0; top:0; width:100%; height:7%; background-color:#000033; color:#fff;}
.left{position:absolute; left:0; top:7%; width:20%; height:93%; background-color:#ff0000;}
.right{position:absolute; left:20%; top:7%; width:80%; height:93%; background-color:#999;}
.footer{position:absolute; bottom:0px; width:100%; height:40px; background-color:#333; color:#FFF;}
</style>
</head>

<body scroll="no">

<div id="main">
<div class="header">Header</div>
<div class="left">Left</div>
<div class="right">
<div style="position:absolute; top:0px; bottom:40px; width:100%; overflow-y:auto; background-color:#FFFFFF;">content</div>
<div class="footer">Footer</div>
</div>
</div>

</body>
</html>
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month