homepage Welcome to WebmasterWorld Guest from 54.234.59.94
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
100% Height Document Template Layout
username




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

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>

 

MarkFilipak




msg:4092924
 2:30 pm on Mar 7, 2010 (gmt 0)

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.

username




msg:4093074
 11:03 pm on Mar 7, 2010 (gmt 0)

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved