Forum Moderators: not2easy
I've read a couple of topics about my problem, but none had a perfect solution.
Here's the deal:
Like a lot of people, i've got a 2 column (menu and content DIV) lay-out with a header and an footer. All are in a container DIV, centered on the page. The problem is that the DIV's won't expand on the page 100%. The container (page) is set to height:100%. Both menu and content DIV to. The header DIV has a fixed height.
The problem is that in Mozilla (Firefox) the container DIV doesn't scale width the inner DIV's.
Two solutions I read
1. Place a spacer DIV below content DIV with clear:both
---> This doesn't work for my lay-out
2. Give container DIV padding-bottom. (height=size of fixed header+fixed footer)
---> This works! But when I display it in Internet Explorer? This has the same problem I had first on Mozilla. Container DIV lies behind menu and content DIV.
-----------------------------------------------------
Can anyone help me?
Here's my code:
-----------------------------------------------------
<!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>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
background:#AAA;
height:100%;
margin:0;
padding:0;
width:100%
}
#page {
background:#AAA;
border-bottom:1px solid #000;
border-left:1px solid #FFF;
border-right:1px solid #000;
border-top:1px solid #FFF;
height:100%;
margin:0 auto;
padding-top:4px;
width:776px;
voice-family:"\"}\"";
voice-family:inherit;
width:774px
}
#header {
background:#174D88;
border-bottom:1px solid #FFF;
border-left:1px solid #000;
border-right:1px solid #FFF;
border-top:1px solid #000;
clear:both;
font-size:9px;
height:21px;
margin:0 4px 4px 4px;
padding:3px 0 0 6px;
width:766px;
voice-family:"\"}\"";
voice-family:inherit;
height:16px;
width:758px
}
#menu {
background:#BBB;
border-bottom:1px solid #FFF;
border-left:1px solid #000;
border-right:1px solid #FFF;
border-top:1px solid #000;
display:inline;
float:left;
height:100%;
margin:0 0 4px 4px;
width:137px;
voice-family:"\"}\"";
voice-family:inherit;
width:135px
}
#content {
background:#DDD;
border-bottom:1px solid #FFF;
border-left:1px solid #000;
border-right:1px solid #FFF;
border-top:1px solid #000;
display:inline;
float:left;
height:100%;
margin:0 0 4px 4px;
width:625px;
voice-family:"\"}\"";
voice-family:inherit;
width:623px
}
#footer {
background:#174D88;
border-bottom:1px solid #FFF;
border-left:1px solid #000;
border-right:1px solid #FFF;
border-top:1px solid #000;
clear:both;
font-size:9px;
height:21px;
margin:0 4px 4px 4px;
padding:3px 0 0 6px;
width:766px;
voice-family:"\"}\"";
voice-family:inherit;
height:16px;
width:758px
}
</style>
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Try removing the height declaration for #page and see if that works, although I've seen a lot of people have trouble with this kind of layout here.
Mozilla: Why doesn't the DIV (content) height stretch?
IE: Why doesn't the DIV (menu) height stretch?
note: it works in IE5.5 and IE5.0!
-----------------------------------
<!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>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#mainWrapper {
background:#AAA;
border-left:1px solid #FFF;
border-right:1px solid #000;
height:200px;
margin:0 auto;
width:776px;
voice-family:"\"}\"";
voice-family:inherit;
width:774px
}
.ie5{} /* IE5.0 hack */
#menu {
background:#BBB;
border-bottom:1px solid #FFF;
border-left:1px solid #000;
border-right:1px solid #FFF;
border-top:1px solid #000;
display:inline;
float:left;
height:100%;
margin-left:4px;
width:137px;
voice-family:"\"}\"";
voice-family:inherit;
width:135px
}
.ie5{} /* IE5.0 hack */
#content {
background:#DDD;
border-bottom:1px solid #FFF;
border-left:1px solid #000;
border-right:1px solid #FFF;
border-top:1px solid #000;
color:#000;
display:inline;
float:left;
font-size:11px;
height:100%;
margin-left:4px;
width:625px;
voice-family:"\"}\"";
voice-family:inherit;
width:623px
}
</style>
</head>
<body>
<div id="mainWrapper">
<div id="menu"></div>
<div id="content">
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
abcdefghijklmnopqrstuvwxyz<br />
</div>
</div>
</body>
</html>
A height declaration of 100% in menu and content means that those divs are set to be 200px high. Divs are quite strict about their widths and heights, as soon as you've declared this for its container, that's how high it will be, that is correct behavior. The only way to make a div stretch the way you want is to not set any height on any container of the div, then it will flow down to fit its contents.
The best way to get the behaviors you are looking for, at least one that actually works reliably, and that's to use a table, which always resizes itself to fit its content, except in Opera, from what I've seen, if you declare its height at 100%, that's how high it will be.
When I want one column or cell to always match height with another column or cell no matter how long the page gets, I always use a table, it's the best tag for the job, especially once your page extends off the screen.
To see where your HTML is showing up on the screen place your HTML between the <TD> and </TD> tags, (where the "x" is now).
There is a 1 pel border and 8 pel of cellspacing defined, to make the whole screen light blue, (no borders or spacing), change the parameters for
BORDER= and CELLSPACING= to "0". I just set them to 1 and 8 so the effect could be seen.
I realize this is simplistic, but maybe it will help some beginners.
NOTE: w3.org defines "height" in regards to TABLE cell size as a "suggestion", (other browser/HTML settings may take precedence).
<HTML>
<HEAD>
<TITLE>100 Percent Window Size</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<TABLE border="0" cellspacing="8" cellpadding="0" width="100%" height="100%">
<TR>
<TD bgcolor="#E0E0FF" align="CENTER" valign="MIDDLE" width="100%" height="100%">
x
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
But if I don't set the HEIGHT of the mainWrapper, then my mainWrapper background isn't visible at all. Due to the floats, the 2 floating DIVs overlay the mainWrapper. WHY GOD?! WHY!? :-P
Note: IE6 will not resize the main content pane unless you specify a height. However, when you do this, the backgrounds recieve the height that was specified for the content div... This is IE only so I'm pretty there must be a way to fix it. The q is how. (atm. I usually just use an image background png in IE only. It works.)
