Forum Moderators: not2easy
I'm trying to lay out a page like you would with frames where you have areas of specific height at the top and bottom of the page and a main area in the middle which uses the rest of the available room.
I've gotten it working under IE with the help of DrDoc, but Firefox isn't playing very nice. No matter what I do it always sets the main DIVs height as just enough to show the content.
Here is DrDoc's example that works fine in IE but not in Firefox:
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
margin: 0;
overflow: hidden;
padding: 0;
}
html {
padding: 50px 0 20px;
}
body {
height: 100%;
}
#header {
background: #f00;
height: 30px;
position: absolute;
top: 0;
width: 100%;
}
#topnav {
background: #ff0;
height: 20px;
position: absolute;
top: 30px;
width: 100%;
}
#main {
height: 100%;
}
#sidenav {
background: #00f;
height: 100%;
float: left;
width: 200px;
}
#content {
height: 100%;
margin-left: 200px;
overflow: auto;
}
#footer {
background: #0f0;
height: 20px;
margin-top: -20px;
position: absolute;
top: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="topnav">topnav</div>
<div id="main">
<div id="sidenav">sidenav</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
PS: Is there an easier way to format code other than using a <quote><pre> combo? That's the only way I could get it to display somewhat nicely. In addition, it copy/pastes very poorly, any ideas with that?
Thanks again!
[edited by: SuzyUK at 11:25 pm (utc) on Feb. 6, 2006]
[edit reason] just fixin' horizontal scroll [/edit]
though how it will affect the above frame-like solution/scrollbars, I can't remember, I think it causes other issues after that, search the forum for "frames with css" as IIRC this has come up before
in strict mode the root element is html (In FF anyway), not body so the 100% needs to go on the html element as well in order for the height to be inheritable from throughout the process
to correct height inheritance:
html, body {height: 100%;}
Suzy
The problem I'm having is that while I can get a DIV to display 100% in Firefox, I'm trying to place a header and footer on the page as well. That's the reason for the padding in the HTML element of the CSS.
For example, I have a total of 150px of header and footer, I put
html {
padding: 100px 0px 0px 50px;
}
In IE the 100% is only the space left over after padding is taken into account. In Firefox it uses 100% of the total space without regard for padding.
Do you have any idea to make Firefox do like IE? I want the DIV to 100% of the viewable space *minus* the header/footer space. The header and footer are positioned absolutely.
Thanks!
Real briefly for now, your sidenav you are trying to set to 100% but 100% of what? It could be the main div but that is set to 100% of what? And so on. You could set html to some px value. Then all the decending divs will become 100% of that. You get the point and I'm being yelled at by my wife to get off the @#$#@ computer.
How can Firefox be right about this? If I adjust the padding of the HTML element, shouldn't it change how big something is when I say it's height is 100%? This is how Firefox acts in other ways, why not here?
The issue is that Firefox is interpreting 100% as the full height of the page and is not taking into account the headers and footer. This means that the content area overflows the page and spills into the nether-land past the bottom of the browser window.
Like I said DrDoc, your example doesn't even work. Do you have any idea how to fix it? I do appreciate the help.
If it weren't for that overly draconian rule about no URLs I'd show you what I mean but of course it could all be a trick to get you to look at an ad or click a referrer link.
wrapper elements
Let me correct myself ... I re-read one of your earlier posts, in which you mentioned you'd like to find a solution which did not include lots of extra elements. Thus, the solution below contains the exact same markup as before, just with different CSS.
I believe you'll find this working much better :)
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#header {
background: #f00;
height: 30px;
position: absolute;
top: 0;
width: 100%;
}
#topnav {
background: #ff0;
height: 20px;
position: absolute;
top: 30px;
width: 100%;
}
#main {
bottom: 20px;
left: 0;
position: absolute;
right: 0;
top: 50px;
}
#sidenav {
background: #00f;
height: 100%;
float: left;
width: 200px;
}
#content {
height: 100%;
overflow: auto;
}
#footer {
background: #0f0;
height: 20px;
margin-top: -20px;
position: absolute;
top: 100%;
width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
html {
padding: 50px 0 20px;
}
#main {
bottom: auto; left: auto; right: auto; top: auto;
height: 100%;
position: static;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">header</div>
<div id="topnav">topnav</div>
<div id="main">
<div id="sidenav">sidenav</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
<div id="wrapper">
<div id="container">
<div id="topbar"><img src="images/topbar.gif" alt="" width="754" height="24" border="0" /></div>
<div id="statusbar">Shows Date</div>
<div id="menu">
Left menu here
</div>
<div id="main">
right content here
</div>
</div>
</div>
<div id="footer">
footer at the bottom here
</div>
CSS:
#wrapper {
background: #ffffff;
margin: 0px auto;
width: 756px;
}
#container {
background: #C4DAFA;
border: 1px solid #002D96;
padding: 0px 0px 3px 0px;
margin: 0px auto;
width: 754px;
float: left;
text-align: left;
}
#topbar {
background: transparent;
border-bottom: 1px solid #002D96;
}
#statusbar {
background: #EAE6D3;
border-bottom: 1px solid #002D96;
height: 25px;
width: 754px;
margin-top: 0px;
padding: 0px 0px 0px 0px;
}
#menu {
background: #ffffff;
border: 1px solid #002D96;
width: 164px;
float: left;
margin: 3px 0px 3px 4px;
padding: 0px 0px 0px 0px;
}
#main {
background: #ffffff url(images/main-head.gif) no-repeat top left;
border: 1px solid #002D96;
width: 574px;
float: right;
margin: 3px 4px 3px 0px;
padding: 2px 0px 0px 0px;
}
#footer {
background: #EAE6D3;
border-bottom: 1px solid #002D96;
border-right: 1px solid #002D96;
border-left: 1px solid #002D96;
height: 20px;
width: 746px;
text-align: right;
clear: both;
margin: 0px auto;
padding: 0px 8px 0px 0px;
}
Any ideas?
I haven't completely read your post but, remember, if you set a height to 100%, it will become the height of whatever the parent element is. But if none of the parent elements are set, then it will become the height of body or html, or this could be different depending on the content of one of the parent elements.
More after I look at this again.
[edited by: drhowarddrfine at 3:36 pm (utc) on Feb. 10, 2006]
If I adjust the padding of the HTML element, shouldn't it change how big something is when I say it's height is 100%?Padding is not part of the height/width of an html element. Nor is the margin.
FF treats <html> and <body> seperately while IE does not. I haven't looked yet but this makes me wonder if this is part of the problem.
html[edited by: DrDoc at 7:20 pm (utc) on Feb. 10, 2006]
