...

View Full Version : Help with 100% width and height layout



JayStang
11-04-2009, 03:26 AM
Hey guys,
I'm a bit of a noob to some of this stuff and was hoping for some help. Below is an image of the layout i'm trying to achieve, and below that is the code I have so far. So what I'm struggling with is the 100% width's and height's on the nav and main content areas. If I set either a width or height of 100% it will be 100% of the entire page, not just expand in the content area it's sitting in. Also I need to make the main content section scroll within if there is overflowing content. Any help would be greatly appreciated.

http://members.cox.net/jaystang20/layout.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<style>

html
{
height: 100%;
}

body
{
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#header
{
background-color: #175FC1;
width: 100%;
height: 130px;
}

#footer
{
position: absolute;
bottom: 0px;
background-color: #175FC1;
width: 100%;
height: 30px;
}

#main_container
{
width: 100%;
}

#nav
{
width: 200px;
background-color: #FCFF00;
float: left;
}

#main_content
{
background-color: #FF1200;
float: left;
}
</style>

<body>

<div id="header">Header</div>
<div id="main_container">
<div id="nav">Nav</div>
<div id="main_content">Main Content</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

Excavator
11-04-2009, 06:42 AM
Hello JayStang,
Try splitting the 100% of your screen height between the header, content and footer. Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
font: 14px "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#header {
height: 20%;
background: #03F;
}
#wrap {
height: 70%;
background: #ff3;
}
#content {
margin: 0 0 0 200px;
height: 100%;
overflow-y: scroll;
background: #f00;
}
#content p {
width: 150px;
margin: 20px auto;
}
#footer {
height: 10%;
width: 100%;
position: absolute;
bottom: 0;
background: #000;
}
</style>
</head>
<body>
<div id="header">
<!--end header--></div>
<div id="wrap">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end content--></div>
<!--end wrap--></div>
<div id="footer">
<!--end footer--></div>
</body>
</html>

abduraooft
11-04-2009, 09:11 AM
Or check http://bonrouge.com/2c-hf-fluid.php

JayStang
11-04-2009, 01:55 PM
Hello JayStang,
Try splitting the 100% of your screen height between the header, content and footer. Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
font: 14px "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#header {
height: 20%;
background: #03F;
}
#wrap {
height: 70%;
background: #ff3;
}
#content {
margin: 0 0 0 200px;
height: 100%;
overflow-y: scroll;
background: #f00;
}
#content p {
width: 150px;
margin: 20px auto;
}
#footer {
height: 10%;
width: 100%;
position: absolute;
bottom: 0;
background: #000;
}
</style>
</head>
<body>
<div id="header">
<!--end header--></div>
<div id="wrap">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end content--></div>
<!--end wrap--></div>
<div id="footer">
<!--end footer--></div>
</body>
</html>


Hi Excavator,
This is pretty damn close to what I'm looking for, however one thing I failed to mention is I need the header and footer static heights (about 130px for the header and 30px for the footer). Because of this I can't rely on setting the #content to 70%, and at 100% it brings me back to my original issue of it being 100% of the full screen not the screen minus the header height and minus the footer height.

Thanks so much!

Excavator
11-04-2009, 03:40 PM
Check abs link.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum