Forum Moderators: not2easy
The CSS:
*{ margin:0px; padding:0px; }
html{ height:100%; }
body{ height:100%; padding-bottom:50px; }
#header IMG{ width:100%; display:block; }
#content{ height:100%; margin-left:50px; margin-right:50px; border:1px solid red; }
#rightPane{ float:right; height:100%; width:200px; padding:16px; border:1px solid yellow; }
#leftPane{ height:100%; padding:16px; border:1px solid green; margin-right:248px; }
The HTML:
<!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=iso-8859-1">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<LINK REL="stylesheet" TYPE="text/css" HREF="main.css">
<title>Chris Cooke's Homepage</title>
</head>
<body>
<div id="header">
<img alt="banner" src="zenbanner.jpg"></div>
<div id="content">
<div id="rightPane">
<h1>Right</h1>
<p>Right pane.</p>
</div>
<div id="leftPane">
<h1>Test</h1>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
<p>Testing now.</p>
</div>
</div>
</body>
</html>
IE6 mostly displays this correctly. The only problem there is I would like the rightPane to match the leftPane in height. As you can see, the rightPane is stretching the height of the screen instead of the height of the document.
In Mozilla, there are two issues. First, the padding in the left and right panes causes them to overflow their parent content div. Secondly, the text in the leftPane is overflowing all of its parents.
What do I need to do to get them to behave correctly? Thanks for your assistance.
I would like the rightPane to match the leftPane in height.
Short of giving both panes the exact amount of content that will match their height to one another, there is no way to force a floated element to match the height of an adjacent, non-floated element. Floated elements are only as tall as either (a) their explicit height setting, or (b) their content.
The "accepted" method to solve this problem is to visually emulate the continuation of the floated sidebar down the page to the height of the non-floated content.
Step 1: Start by creating a 1px high image the same width as the floated sidebar that matches it's background and border.
Step2: Wrap the two elements (float and non-float) in a container (your #content div would work), and set the image you just made as a Y-repeating background on the container. Position it using background-position to the same side as the floated sidebar. You'll also need to float that container to one side or the other and give it a width equal to the width of your layout.
When the sidebar is the longer of the two divs, it's height will control the height of the container.. The background image won't show, nothing's lost.
When the content is longer, the background image will show in the whitespace are below the floated sidebar, creating the illusion of a 100% height column.
For more, search for the article "Faux Columns" by Dan Cedarholm. He's the originator of the technique and explains it far better than I have here.
html height 100%. I've never seen that before
This is a common component in layout methods that make elements 100% the height of the viewport. Because a percentage value must be a percent OF something, you have to apply the 100% all the way up the document tree. Your element becomes 100% of the body. The body becomes 100% of the html element. The html element becomes 100% of the viewport. As you move down the document tree, you wind up with an element that is 100% of the viewport.
First, the padding in the left and right panes causes them to overflow their parent content div. Secondly, the text in the leftPane is overflowing all of its parents.
Since your series of 100% heights is causing the height of #content to be 100% the viewport height (calculated at the moment of rendition), the #content div will not expand to meet a content height that exceeds the viewport height. So the content div stops at 100% veiwport height and the content, itself, keeps on going.
The solution is to use the standard-compliant equivalent of IE's auto-enclosing behavior: min-height. If you set you body and html to 100% height, then set #content's min-height to 100%, then feed IE only a 100% height, the results should be what you want.
#content{
min-height:100%;
}
/*start iemac hide\*/
* html #content{
height:100%;
}
/*end iemac hide*/
cEM
Right now I use css for everything, except inside the #content DIV I have a simple 5 column table that does the trick.
Wouldn't setting the body to 100% make it 100% of the viewport?
<html> is at the top of the document tree. If <body> is set to 100%, it is 100% of <html>, but if <html> is defaulting to auto (as it does in browsers like Moz, FF and Opera), it's value will be determined by it's content, preventing the 100% heights lower in the document tree from having any meaningful reference point.
See Quirksmode [quirksmode.org] for a more detailed explanation on how this breaks down browser by browser. The bottom line is that...
html, body {height:100%;}
...is required for cross browser uniformity.
cEM
Note: All of this presumes a doctype that kicks the compliant browser into Standards mode. In Quirks mode, 100% height on an uncontained element will size it to 100% viewport.
But it creates one more. I set html,body{height:100%; width:100%}. Then I create div{height:100%;width:100%} and put an img inside. If I set the img margin-top:50%, the html height expands, possibly doubles, making the image appear much lower on the page while margin-left:50% works correctly (in FF and IE).
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. This is true for 'margin-top' and 'margin-bottom', except in the page context, where percentages refer to page box height.
