Forum Moderators: not2easy
This is my first posting on webmaster world. I am a webdeveloper in a local authority and we are currently developing an administration facility for our small web apps. The basic layout is specified as a header and footer, with a left hand menu bar with the content on the right hand side.
This all needs to be 100% height of the browser window. We have it working in IE6, and almost working in Firefox - but we can not seem to get the Menu and content sections to stretch to 100% of the screen height - firefox seems to ignore the min-height value. Anyway take a look at the code, thats the easiest way to describe it to you. I have colour coded the areas so its easier to make out which is which.
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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>Untitled Document</title>
<style>
* {
padding:0;
margin:0;
font: small, Verdana, Arial, Helvetica, sans-serif;
}
div#InfoBar {
position:relative;
background-color:#000000;
color:#FFFFFF;
height: 3em;
line-height:1.5em;
z-index:4;
}
html, body {
height: 100%;
}
div#Container {
position:relative;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#Menu {
position: relative;
padding:3em 0em 5em 0em;
width: 20%;
float: left;
margin-top: -3em;
margin-bottom: -8em;
height:auto !important; /* real browsers */
height: 100%;
min-height: 100%;
background:#FFFF99;
z-index:1;
}
div#Content {
position: relative;
float:right;
padding:3em 0em 5em 0em;
width: 80%;
margin-top: -3em;
margin-bottom: -8em;
height:auto !important; /* real browsers */
height: 100%;
min-height: 100%;
background:#66FF99;
z-index:2;
}
div#Footer {
position:absolute;
clear:both;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
height: 5em;
z-index:3;
}
</style>
</head>
<body>
<div id="Container">
<div id="InfoBar">Info Bar</div>
<div id="Menu">Menu</div>
<div id="Content">
Content<br><br>
Content<br><br>
Content<br><br>
Content<br><br>
Content<br><br>
Content<br><br>
</div>
<div id="Footer">Footer</div>
</div>
</body>
</html>
Any help would be greatly appreciated....
Thanks .....
<!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>Untitled Document</title>
<style>
* {
padding:0;
margin:0;
/*font: small, Verdana, Arial, Helvetica, sans-serif;*/
}
div#InfoBar {
position:relative;
background-color:#000000;
color:#FFFFFF;
height: 3em;
line-height:1.5em;
z-index:4;
}
html, body {font-size:100%;
height: 100%;
}
div#Container {
position:relative;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#Menu {
position: relative;
padding:3em 0em 5em 0em;
width: 20%;
float: left;
margin-top: -3em;
margin-bottom: -8em;
/*height:auto !important; real browsers */
height:75%;
min-height: 75%;
background:#FFFF99;
z-index:1;
}
div#Content {
position: relative;
float:right;
padding:3em 0em 5em 0em;
width: 80%;
margin-top: -3em;
margin-bottom: -8em;
/*height:auto !important; real browsers */
height:75%;
min-height: 75%;
background:#66FF99;
z-index:2;
}
div#Footer {
position:absolute;
clear:both;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
height: 5em;
z-index:3;
}
</style>
</head>
<body>
<div id="Container">
<div id="InfoBar">Info Bar</div>
<div id="Menu">Menu</div>
<div id="Content">
Content<br><br>
Content<br><br>
Content<br><br>
Content<br><br>
Content<br><br>
Content<br><br>
</div>
<div id="Footer">Footer</div>
</div>
</body>
</html>
Because your using em and 100% they get a bit weird. Seems to work in IE 6,7 FF & opera. All I've done is drop the height. Should help you see whats happening set it back to 100% and see the difference.
Or any pointers as to how to improve the CSS but still retain the end result.
Thanks for your help!
- The header and footer will be of fixed height and 100% width.
- The menu and content sections need to fill the rest of the areas - and if the content expands greater than the browser window then BOTH content and menu sections should expand together whilst pushing the footer down below them - thus the reason for needing them both to have 100% height with the margins compensating for the header and footer sections.
If there is a better or an easier way to achieve this in both IE and Firefox then great, im open to suggestions.
Hope this makes this a bit clearer as to what is trying to be achieved.
Thanks
Usually the menu sidebar would be some fixed height so if you question why you need the content to fill to the bottom you can try to cheat.
Meaning if its the background colour then make the body background that colour or use a background image and repeat-y
Just an example and I know it doesnt fill all your requirements, move the class="w" into the menu div to see it fail ;) All i've done is put background:pink; in the body tag to hide the shortness of the menu.
eg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
html, body {height:100%; font-size:100%; background:pink;/**/}
#header {height:10%; background:red;}
#menu {min-height:80%;height:80%; width:20em; float:left; background:pink;}
#content {margin-left:20em; background:green; min-height:80%;}
#footer {clear:both; height:10%; background:blue;}
.w {width:30px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#menu {height:80%;}
#content {height:80%;}
</style>
<![endif]-->
</head>
<body>
<div id="header"><h1>The header</h1></div>
<div id="menu"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac tellus eu turpis tempor pharetra. Fusce eget odio id mauris volutpat accumsan. m dolor sit amet, consectetuer adipiscing elit. Vestibulum ac tellus eu turpis tempor pharetra. Fusce eget odio id mauris volutpat accumsan.</p></div>
<div id="content"><p class="w">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac tellus eu turpis tempor pharetra. Fusce eget odio id mauris volutpat accumsan. Vivamus sagittis tincidunt nibh. Aliquam elementum, </p></div>
<div id="footer"><h4>footer</h4></div>
</body>
</html>
