homepage Welcome to WebmasterWorld Guest from 54.211.138.180
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved