I've been messing around with a copy of a 3-column CSS stylesheet at
http://www.positioniseverything.net/...olcomplex.html, and I have a question. If the content in the middle column is short, and the content in left column and/or right column is much longer, the content from the left and right columns overlap the gray background on the bottom. This happens in IE7 and Firefox. I'm including the code below:
Code:
<!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>TEST - 3 Column Complex Layout demo</title>
<meta name="author" content="Holly Bergevin, April 1, 2003" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="description" content="A demo showing possibilities for laying out a
complex 3-col page." />
<meta name="keywords" content="demo,test,big john,big,john,position is everything,
position,css,html,bug,bugs,bug fix,holly bergevin,holly's wilderness" />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
<!--
/* >>>>> Page Styles <<<<< */
html, body {margin: 0; padding: 0; font-size: 100%; }
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #000;
background: #9ba49b; }
#pagetitle {
margin: 0;
padding: 10px 0 0 0;
text-align: center;
font-size: 210%;
color: #771464; }
pre {
margin: 0 0 0 10px;
padding-top: 8px;
font-family: Verdana, sans-serif;
font-size: 95%;
font-weight: normal; }
p {margin: 0; padding: 8px 7px 0 10px; }
#contents p {font-weight: bold; }
.altcolor {color: #eef7e2; font-weight: bold; }
.altcolor2 {color: #cde7a8; }
.altcolor3 { color: #771464; font-weight: bold; }
#demotext {
border: 2px solid #233622;
background: #cde7a8;
color: #233622;
margin: 8px 149px 5px 10px;
padding: 0 5px 5px 0;
position: relative; } /*** for IE6 ***/
a:link {color: #eef7e2; text-decoration: underline; padding: 1px; }
a:visited {color: #eef7e2; text-decoration: underline; padding: 1px; }
a:hover {color: #000; background: #eef7e2; text-decoration: underline; padding: 1px; }
#leftbox a:link, #leftbox a:visited {color: #233622; text-decoration: underline; }
.right a:link strong, .right a:visited strong, .right a:link, .right a:visited {
color: #000; text-decoration: underline; background: #eef7e2; padding: 1px; }
/*** Redundancy in this selector and the one below allows Op6 to display links properly ***/
.right a:hover strong, .right a:hover {color: #771464; background: #f4e6ef; padding: 1px; }
#contents a:link, #contents a:visited {
color: #000; text-decoration: underline; background: #f4e6ef; padding-top: 0; }
#contents a:hover {color: #f9f; background: #233622; padding-top: 0; }
#footer a:link, #footer a:visited {color: #771464; }
strong {font-weight: bold; color: #233622; }
pre strong {color: #000; }
#contents strong {color: #f9f; }
#contents pre.altcolor2 strong {color: #cde7a8; }
.alignright {margin: 0; padding: 1em 10px 2.5em 0; text-align: right; }
.small {font-size: .9em; color: #771464; }
.alignright strong {color: #771464; font-weight: bold; }
.decoration {float: right; margin: 0.5em 1em 3px 3px; position: relative; } /*** for IE6 ***/
html[xmlns] .decoration {margin: 0 1em 0 0; } /*** Moz put the image too low ***/
.kudos {
margin-top: 3em;
border-top: 3px double #233622;
border-bottom: 3px double #233622;
padding-bottom: 5px; }
#bottom {font-size: 1px; line-height:0; margin:0; padding:0;}
/* *****>>>>> Demo Styles <<<<<***** */
/*** The #header div has a static position and a background image ***/
#header {
margin: 0;
padding: 0;
background: url("images/waterlilies6.jpg") 0 0 no-repeat; /*** this is a shorthand
property for the various
background properties ***/
height: 100px; } /*** must be set so the following absolutely positioned divs are
placed correctly on initial load of the page***/
#leftbox {
position: absolute;
left: 0px;
width: 215px;
border-top: 1px solid #000;
background-color: #9ba49b;
color: #000;
padding-top: 5px; }
#container {
margin-left: 215px;
background: #faf5f8 url("images/gif/rightboxline.gif") 100% 0 repeat-y;
border-left: 1px solid #000;
}
#navmenu {
background-color: #879186;
border: 1px solid #000;
border-width: 1px 0;
padding: 3px 0;
position: relative; } /*** IE6 needs this to display the div ***/
/* Hide from IE5-Mac \*/
* html #navmenu {height: 1%;}
/* end hide *//*** This hack will make IE5-win display the background color for the nav ***/
#navmenu ul {
display: block;
list-style: none;
padding: 0;
margin: 0;
font-family: Verdana, sans-serif;
text-align: center;
line-height: 1.2em; }
#navmenu ul li {
font-weight: bold;
display: block;
float: left;
position: relative; /*** IE6 needs this to display the links ***/
padding: 1px 0;
margin: 3px 0;
width: 10em;
border-right: 2px solid #000; }
#navmenu ul li.first {
margin-left: 0;
list-style: none; }
#navmenu ul li.last {
border-right: none; }
#navmenu a {
padding: 3px 0;
color: #000; }
#navmenu a:hover {
color: #faf5f8;
background: #879186; }
#navclear {
display: block;
clear: both; }
/*** IE5/Mac has trouble with right positioned boxes due to a secret margin. See
- http://www.l-c-n.com/IE5tests/right_pos/index.shtml - Philippe Wittenbergh's page
for an explanation of this problem and Sam Foster's page for an explanation of the
hack used - http://www.sam-i-am.com/testsuite/css/mac_ie5_hack.html - ***/
#rightbox {
position: absolute;
right: 16px;
margin-right: -15px;
width: 138px;
padding-top: 5px;
}
/* hide the following from IE5-Mac \*/
#rightbox {
right: 0;
margin-right: 0; }
/* IE5-Mac can see the rest */
#wrapper {
margin-right: 138px;
padding-top: 5px; }
/*** Tan hack for IE. Only IE browsers see this selector.
This replaces the old Tantek hack. Please see Edwardson Tan's page.
http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html ***/
* html #wrapper {
width: 100%; /*** IE5.5 needs this value to eliminate a horizontal scrollbar ***/
w\idth: auto; } /*** resets the value for IE6 and IE5-Mac ***/
#content {
float: left;
margin-left: 6px;
width: 95%;
padding: 5px 5px 5px 0;
background: #c3c8c3;
}
html>body .left {margin-left: 12px; } /*** IE doubles the margin on the float. This sets
the margin to the correct width for others ***/
.right {
float: right;
margin-right: 6px;
width: 43%;
padding: 5px 5px 5px 0;
background: #c3c8c3; }
html>body .right {margin-right: 12px; } /*** IE doubles the margin on the float. This sets
the margin to the correct width for others ***/
.clear {
clear: both;
margin: 0;
padding: 0; }
#contents {
background-color: #233622;
margin: 8px 149px 5px 10px;
/*margin-right: 149px;
margin-left: 10px;*/
color: #eef7e2;
padding: 3px 3px 15px 3px;
position: relative; } /*** IE6 needs this to display the div ***/
#footer {
background: #f0f1f0;
margin-top: 1.5em;
margin-right: 139px;
border-top: 1px dashed #888; }
-->
#nav, #nav ul { /* all lists */
padding: 0px;
margin:0;
list-style: none;
line-height: 1;
}
#nav a {
display:block;
width:auto;
text-decoration:none;
font-size:1.0em;
padding:2px 0px 2px 2px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left'*/
color:#FFF;/* white */
}
#nav a:hover,
#nav a.hover {
color:#000;/* black */
background-color: #CCF; /* ice blue */
}
.root {
border:1px solid #306; /*'border-width' 'border-style' 'color'*/
text-align:center;
background-color: #99C; /* light blue */
color:#FFF;/* white */
}
#nav li { /* all list items */
float: left;
width: 116px; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
background-color: #99C; /* light blue */
width: 116px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border: 1px solid #306;/*'border-width' 'border-style' 'color'*/
text-align:left;
margin-left:-1px;
*margin-left:-59px; /* for IE5.5+ only */
margin-top:0px;
color:#FFF;
}
.subtab {
border-bottom:1px solid #FFF;/*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/
}
#nav li ul ul { /* third-and-above-level lists */
margin: -17px 0 0 116px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
*margin-left: 116px; /* for IE5.5+ only */
}
#nav li:hover,
#nav li.hover { /* List Hover Properties */
background-color: #CCF; /* light blue */
display: inline;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
</style>
</head>
<body>
<div id="header">
<strong>##HEADER##</strong>
</div>
<div id="leftbox">
<strong>##LEFT COLUMN##</strong>
<br />
content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here.
</div>
<div id="container">
<div id="rightbox">
<strong>##RIGHT COLUMN##</strong>
<br />
content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here.</div>
<div id="wrapper">
<h1>Page Title</h1>
Home > Another Page > Another page again
<br /><br />
<div id="content">
content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here. content will go here.
</div>
<div class="clear"> </div>
</div>
<div id="footer" align="center">
<strong>##FOOTER##</strong>
</div>
</div>
</body>
</html>
If anyone can see of a way to make the left and right column go all the way to the bottom of the page when the content is so short, that would be great. This scenario happens from time-to-time on my site, so I really need this to work. Thanks in advance for any and all help.
KWilliams
3-Column CSS Question
