Help - Search - Members - Calendar
Full Version: 3 Column Layout, Scrolling Issues
HTMLHelp Forums > Web Authoring > General Web Design
Aka Gambit
Sep 29 2009, 06:03 PM
Hello all, I have been working on the same problem for a few weeks now and have tried to solve it myself but have had no luck so I resorted to looking for help online here.

I am working on a 3 column layout for a website, it also has a header and a footer. In the middle of the header and footer are the 3 columns, 2 side columns (right and left) and a center column. Now both side columns and the header and foot work fine and how I want them but the center column does not. I want the center column to add scroll bars when it gets too long (when the bottom meets the same height as the side columns) however all it does is stretch the center column.

I have tried many ways of solving this switching from Framesets, Table, Div, CSS+Div, CSS+Div+Table, CSS+Table, CSS+Framesets+Div, CSS+Framesets+Table, Frameset+Table, Framesets+Div etc. But it all resulted in the same error or a different one. (layout disordered)

I remember a while ago that I had done the same thing so simply but for some reason I can not get it to work now. Hopefully I am just overlooking something.

I have viewed the site on Firefox, Google Chrome, and IE8.

I have used various code but I will post up the last one I used and hopefully someone can help.

HTML
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout testing</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<div class="header">
    <!-- Header start -->
    
        <img src="images/Header2.png">
        
    <!-- Header end -->
</div>
<!-- Columns start -->
<div class="colmask threecol">
    <div class="colmid">
        <div class="colleft">
            <div class="col1" style="background:images/Interrior2.png">
                <!-- Column 1 (Center) start -->

                <div style="height:20%;">
                    <center>
                        <a href="temp.html">About Us</a> | <a href="temp.html">
                        News</a> | <a href="temp.html">Articles</a> | <a href="temp.html">
                        Videos</a> | <a href="temp.html">Behind Scenes</a> | <a href="temp.html">
                        Media</a> | <a href="temp.html">Lifestyles</a> | <a href="temp.html">
                        Store</a>
                    </center>
                </div>
                    <center>
                        Main content will go here.<br>
                        <font face="courier new" size="5">
                        ╓────────────╨╨────────────╖<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║<br>
                        ╙──────────────────────────╜<br>
                        </font>
                        More Content Here.<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                        And Here...<br>
                    </center>
                <!-- Column 1 (Center) end -->
            </div>
            <div class="col2">
                <!-- Column 2 (Left) start -->

                    <img src=images/LeftSide2.png>

                <!-- Column 2 (Left) end -->
            </div>
            <div class="col3">
                <!-- Column 3 (Right) start -->

                    <img src=images/RightSide2.png>
                
                <!-- Column 3 (Right) end -->
            </div>
        </div>
    </div>
</div>
<!-- Columns end -->
<div class="footer">
    <!-- Footer start -->

        <img src=images/Footer2.png>

    <!-- Footer end -->
</div>
</body>
</html>


CSS
CODE
    /* <!-- */
    /* General styles */
    body {
        margin:0;
        padding:0;
        border:0;            /* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#fff;
        min-width:600px;        /* Minimum width of layout - remove line if not required */
                                /* The min-width property does not work in old versions of Internet Explorer */
        font-size:90%;
    }
    /* Header styles */
    #header {
        clear:both;
        float:left;
        width:100%;
        margin:0;
        padding:0;
        border:0;
    }
    #header p {
        padding:0 0 0 0;
        margin:0;
    }
    #header h1,
    #header h2 {
        padding:0 0 0 0;
        margin:0;
    }
    #header ul {
        clear:left;
        float:left;
        width:100%;
        list-style:none;
        margin:0 0 0 0;
        padding:0;
    }
    #header ul li {
        display:inline;
        list-style:none;
        margin:0;
        padding:0;
    }
    #header ul li a {
        display:block;
        float:left;
        margin:0 0 0 0;
        padding:0 0;
        text-align:center;
        background:#eee;
        color:#000;
        text-decoration:none;
        position:relative;
        left:0px;
        line-height:0em;
    }
    #header ul li a:hover {
        background:#369;
        color:#fff;
    }
    #header ul li a.active,
    #header ul li a.active:hover {
        color:#fff;
        background:#000;
        font-weight:bold;
    }
    #header ul li a span {
        display:block;
    }
    /* 'widths' sub menu */
    #layoutdims {
        clear:both;
        background:#eee;
        border-top:0 solid #000;
        margin:0;
        padding:6px 15px !important;
        text-align:right;
    }
    /* column container */
    .colmask {
        position:relative;    /* This fixes the IE7 overflow hidden bug */
        clear:both;
        float:left;
        width:100%;            /* width of whole page */
        overflow:hidden;    /* This chops off any overhanging divs */
    }
    /* common column settings */
    .colright,
    .colmid,
    .colleft {
        float:left;
        width:100%;            /* width of page */
        position:relative;
    }
    .col1,
    .col2,
    .col3 {
    float:left;
    position:relative;
    padding:0 0 0 0;    /* no left and right padding on columns, we just make them narrower instead
                            only padding top and bottom is included here, make it whatever value you need */
    overflow:hidden;
    }
    /* 3 Column settings */
    .threecol {
        background:#fff;    /* right column background colour */
    }
    .threecol .colmid {
        right:15%;            /* width of the right column */
        background:#fff;    /* center column background colour */
    }
    .threecol .colleft {
        right:70%;            /* width of the middle column */
        background:#fff;    /* left column background colour */
    }
    .threecol .col1 {
        width:70%;            /* width of center column content (column width minus padding on either side) */
        left:100%;            /* 100% plus left padding of center column */
    }
    .threecol .col2 {
        width:15%;            /* Width of left column content (column width minus padding on either side) */
        left:15%;            /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    }
    .threecol .col3 {
        width:15%;            /* Width of right column content (column width minus padding on either side) */
        left:85%;            /* Please make note of the brackets here:
                            (100% - left column width) plus (center column left and right padding) plus
                            (left column left and right padding) plus (right column left padding) */
    }
    /* Footer styles */
    #footer {
        clear:both;
        float:left;
        width:100%;
    }
    #footer p {
        padding:0px;
        margin:0;
    }
    
    /* Navigation Bar styles */
    #navbar {
        clear:both;
        float:left;
        width:100%;
        text-align:center;
    }
    
    /* Page Body styles */
    #bmain {
        clear:both;
        float:left;
        width:100%;
    }
    /* --> */


I had also looked on here and searched around here and other sites and modified/replaced my code trying to get it to work so now its not much near what I started with.

Thanks in advance.
Frederiek
Sep 30 2009, 05:12 AM
Can you post the URL (address) of your page?
Dr Z
Sep 30 2009, 05:13 PM
For an alternate method - CSS based Frames, see www.web-zonez.com.
Aka Gambit
Oct 2 2009, 11:59 AM
QUOTE(Dr Z @ Sep 30 2009, 06:13 PM) *

For an alternate method - CSS based Frames, see www.web-zonez.com.


Awesome, thanks for this I am sifting through the code now. This is exactly what I wanted to do...well in principle it is, kinda ugly but the code is what I wanted smile.gif Thanks a bunch.
Susan McD
Nov 9 2009, 04:33 PM
Hi, I have a page that I developed that has three columns & scrollable sections. You can see it at c3huu.org/tmp.

I used a book by Craig Grannell ("The Essential Guide to CSS and HTML Web Design." ) which I found very helpful. You should be able to view the html at the page. Here is the CSS. It is basically several nested divs. It may be hard to follow my code, but Grannell's book is really clear.

Hope this helps.

Susan

/*

STYLE SHEET FOR The Community Church of Chapel Hill UU
Created by Susan McDaniel
mcdaniel56@gmail.com

Thank you to Craig Grannell for the many ideas and how to's in your book "The Essential Guide to CSS and HTML Web Design." I highly recommend this book.
ToC

1. defaults
2. structure
3. links and navigation
4. fonts
5. images

Notes

*/

/* --------- 1. defaults --------- */

* {
margin: 0;
padding:0;
}

html {
font-size: 100%;
}

body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background: #c0bee9;
padding-top: 20px;
}

#masthead, #columnWrapper, #footer {
font: 1.1em/1.5 Verdana, Arial, sans-serif;
}

/* --------- 2. structure --------- */
#wrapper {
width: 950px;
height: 1000px;
margin:0 auto;
}

#masthead { /* container for header */
background: #2a502a;
border: 5px white solid;
padding: 10px;
}

#footer { /* container for footer */
background: #292e6a;
border: 5px solid #ffffff;
padding: 10px;
text-align: center;
font-size: 1.2em;
}

.clearFix:after { /* clear floated content ala Grannell */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#columnWrapper {
background: #ebebeb;
height: 750px;
border-left: 5px white solid;
border-right: 5px white solid;
}

#mainContent { /* center column */
float: left;
width: 295px;
margin-left: 290px; /* equal to width of nav bar + borders, to move it right */
border-right: 7px solid #2a502a;
}

#navBar { /* left column */
float: left;
width: 275px;
margin-left: -590px; /* equal to the mainContent width + margin-left */
border-right: 7px solid #2a502a;
}

#sidebar { /* right column */
float: left;
width: 325px;
}

.columnContentWrapper {
padding: 20px 10px;
}

#mainContent, #navBar, #sidebar {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}

#columnWrapper {
overflow: hidden;
}

.noPaddingWrapper {
padding: 0;
}

#bottomMainContent { /* photo */
width: 255px;
}

#lowerNavBar { /* upcoming services */
padding-top: 20px;
}

#lowerSidebar {
padding-top: 20px;
}

.upcomingScrollable { /* make it scroll */
height: 650px;
overflow: auto;
}

.scrollableColumn {
height: 450px;
overflow: auto;
}

.scrollableColumn2 {
height: 625px;
overflow: auto;
}

/* --------- 3. links & navigation --------- */

/*a:link {
color: #f36522;
}

a:visited {
color: #8a8a8a;
}

a:hover {
color: #f22222;
}

a:active {
color: #000000;
}
*/

.singleButton {
padding:10px;
}

#nonButton a {
color:black;
font-size: 1.2em;
}

#button a:link, #button a:visited {
text-decoration: none;
font-size: 1.3em;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
background-color: #292e6a;
color: #ffffff;
border-top: #dddddd 1px solid;
border-right: #333333 1px solid;
border-bottom: #333333 1px solid;
border-left: #dddddd 1px solid;
}

#button a:hover {
background-color: #999999;
}

#button a:active {
padding: 2px 13px 4 px 7px;
background-color: #444444;
color: #eeeeee;
border-top: #333333 1px solid;
border-right: #dddddd 1px solid;
border-bottom: #dddddd 1px solid;
border-left: #333333 1px solid;
}

#footer p a:link, #footer p a:visited {
color: #ffffff;
}

/* --------- 4. fonts --------- */

h1 {
margin:5px;
font: 26pt normal italic Arial, sans-serif;
text-align:right;
color: white;
}

h2 {
font: bold 1.5em Arial, sans-serif;
text-transform: uppercase;
margin-bottom: 2px;
}

p {
margin-bottom: 1em;
}

ul {
list-style: none;
}

#footer p {
color: white;
}

#purpose {
font: italic 1.2em Verdana, Arial, Helvetica, sans-serif;
text-transform: none;
color: white;
}

#bottomMainContent h2 {
display: block;
background: #2a502a;
text-align: center;
color: #ffffff;
text-transform: lowercase;
padding: 3px;
}

#bottomMainContent ul {
padding: 5px;
}

#weeksEvents li {
font-size: 1.1em;
}

#weeksEvents li ul {
font-size: 0.8em;
}

.sunDate {
padding-top: 5px;
font: bold 1.1em/1.5 Verdana, Arial, Helvetica, sans-serif;
}

.serviceTitle {

font: bold 0.8em/1.1 Verdana, Arial, Helvetica, sans-serif;
}

.serviceText {
margin-top: 2px;
font: normal 0.8em/1.1 Verdana, Arial, Helvetica, sans-serif;
}

/* --------- 5. images --------- */
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.