Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 29th, 2008, 10:11 AM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
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
Reply With Quote
  #2 (permalink)  
Old April 2nd, 2008, 07:44 PM
Registered User
 
Join Date: Apr 2008
Location: , , .
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

Reply With Quote
  #3 (permalink)  
Old April 8th, 2008, 02:33 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
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
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 09: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 05:21 AM



All times are GMT -4. The time now is 10:54 PM.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.