kwilliams Posted February 29, 2008 Share Posted February 29, 2008 I've been messing around with a copy of a 3-column CSS stylesheet at http://www.positioniseverything.net/guests/3colcomplex.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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!-- Source: http://www.positioniseverything.net/guests/3colcomplex.html --><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/w3pantheon/style/modifiedsbmh.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><!-- end header --> <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><!-- end leftbox --> <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><!-- end rightbox --> <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><!-- end content --> <div class="clear"> </div><!-- end clear --> </div><!-- end wrapper --> <div id="footer" align="center"> <strong>##FOOTER##</strong> </div><!-- end footer --> </div><!-- end container --></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. Link to comment Share on other sites More sharing options...
S@m Posted February 29, 2008 Share Posted February 29, 2008 http://www.themaninblue.com/experiment/footerStickAlt/ Link to comment Share on other sites More sharing options...
kwilliams Posted February 29, 2008 Author Share Posted February 29, 2008 http://www.themaninblue.com/experiment/footerStickAlt/Thanks for the link, but that doesn't solve my problem when it comes to a 3-column layout. That only deals with having a footer at the bottom of the page. If you or anyone could include info and/or links to examples using a 3-column layout that solves my problem, that would be great. Thanks. Link to comment Share on other sites More sharing options...
jeffman Posted March 1, 2008 Share Posted March 1, 2008 When I think columns, I think three vertical divs side by side. Maybe they're all held in the same container, maybe not. Maybe capped on the top and bottom by a header and a footer.But you have 1 div off to the left, and then the right and middle divs and footer all wrapped up in the next div. And in that order. I don't get it. Maybe there's something cool gonna happen, but I don't get it yet. The markup looks really weird, not at all what I expected from your description. And the two-tone column on the right. Or is that part of the problem? I'm confused.Maybe this'll help.Since you don't know the height of the tallest div till it gets filled with text on the fly (and it will be different on every browser on every platform), you can't use a fixed height for all 3 columns. I guess you know that.You'll need a little javascript. It's really the only way to tweak things on the fly. You'll need to figure out which of your columns has the largest offsetHeight and then adjust the style.height of the other two to match that height.If in fact that's what you're asking? Link to comment Share on other sites More sharing options...
jlhaslip Posted March 1, 2008 Share Posted March 1, 2008 gAre you clearing the footer?google "ryan fait sticky footer" for another approach. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.