Wrox Programmer Forums
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 29th, 2008, 11:11 AM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default 3-Column CSS Question

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">&nbsp;</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
 
Old April 2nd, 2008, 07:44 PM
Registered User
 
Join Date: Apr 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

without going through your css (there's too much for me to go through)

you could add

clear: both;

to the bottom footer of the page, and that would stop the overflow onto the footer from the other columns.

I hope that helps with the issue..

Good luck

 
Old April 8th, 2008, 02:33 PM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I was able to find an alternative CSS stylesheet at http://www.pixy.cz/blogg/clanky/css-3col-layout/, and it works great for me. Thanks for your input.

KWilliams





Similar Threads
Thread Thread Starter Forum Replies Last Post
Customize column in CSS friendly GridView Frankster BOOK: Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages ISBN: 978-0-470-12448-2 2 April 14th, 2010 10:04 AM
Question on First CSS savoym CSS Cascading Style Sheets 2 February 1st, 2007 10:02 AM
CSS question Edward King CSS Cascading Style Sheets 1 September 16th, 2005 01:02 PM
CSS Question / layers/ helllllp paris HTML Code Clinic 5 June 21st, 2004 04:52 PM
Tables vs. layers (CSS question) jacob HTML Code Clinic 6 December 1st, 2003 06:21 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.