Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Sarah Bradberry
Sarah Bradberry
7,115 Points

Need Help Troubleshooting my css please

I've been working on getting my website to look exactly the way I want while updating my skills here on treehouse but I've come unstuck in one regard.

No matter what I do, I can't get my right hand column to go all the way down to the footer when the content of the page on the left hand side is very long.

I've tried the trick of making the height of all containing elements 100% but when I do the footer retreats halfway up the page like this

creeping footer

When I stopped setting the height of #whitebox the problem went away but my pink side column still doesn't go all the way down to the footer.

Here is the live page shown in the graphic above but without the error

Here is my css

@charset "utf-8";

html {
    box-sizing:border-box;
}

html,
body,
div.gridContainer,
#content,
#sidebar {
    height: 100%;
}

img, object, embed, video {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */

}

body {
    background: #a6cf97;
    background-image: url("graphics/knit1.png"), url("graphics/knit2.png");
    background-repeat: repeat-x, repeat;
}


/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
}

.fluid > p, .fluid > h1, .fluid > h2, .fluid > h3, .fluid > h4, .fluid > h5 {
    padding: 0px 10px 0px 20px;
}

 .fluid > table {
    margin: 0px 20px; 
    width: 95%;
}

.fluid > ol, .fluid > ul {
    list-style-position: inside;
    padding-left: 20px;
}


.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

hr {margin-left: 20px;}

#pink {
    background-color:#fbd8e3;
}

#patternCreate, #patternResult {
    margin-left: 20px;
}

/* Mobile Layout: 480px and below. */
.widget-title {
    padding: 0px 5px 5px 0px; 
    margin: 0px; 
    font-size: 18px;
}

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    clear: none;
    float: none;
}

/* header */
header#header { 
    background: url(graphics/header.png)  left no-repeat;
    height: 90px;
    padding-left: 145px;
}

header#header h1{
    color: #000;
    line-height: 70px;
    font-size: 1.5em;
}

header#header a {
    text-decoration: none;
}

/* Breadcrumbs */

#breadcrumbs {
    display: none;
}

#breadcrumbsgallery {
    display: none;
}

    /* search bar */

    #search-menu-bar{
    background-color:#fbd8e3;
    display: block;
    overflow: hidden;
}
.search {
    width: 100%;
    background: #fbd8e3;
    padding: 10px;
    display:block;
}

.search form {
    text-align: right;
    margin-right: 20px;
}

.search input {
    height: 45px;
}


.searchgallery {
    width: 100%;
    background: #fbd8e3;
    padding: 10px;
    display:block;
}

.searchgallery form {
    text-align: right;
    margin-right: 20px;
}

.searchgallery input {
    height: 45px;
}

#mobile-menu-link {
    float:left;
    display: inline-block;
    padding: 15px 15px 15px 10px;
}

#mobile-menu-link a {
    margin-top: 15px;
    line-height: 15px;
    font-size: 1.5em;

}

#mobile-menu-link a:hover { 
    background: #f32a78;
    color: #FFF;
    padding: 10px 0px 15px 0px;
}

/* My social icons */
#social {
    display: none;
}

/* titles */
#title {
    background: #fbd8e3;
    margin-top:3px;
}

#title h1, #title h2, #title h3, #title h4, #title h5 {
    padding-left: 10px;
}

#title h1 {
    font-size: 24px;
}

/* Social sharing icons */
#socialbuttons {
    display: none;
}

/* content */
#content {
    width: 100%;
    background-color: #ffffff;
}

.ad-left {
padding: 0px 20px 20px 20px;    
float: left;
}

#flower_gallery {
    width:100%;
}

#embroidery-tables {
    margin-left: 20px;
}

.striped-table-from-row-3 tr:nth-child(2n+3) {
    background-color: #fbd8e3;
}

.striped-table-from-row-2 tr:nth-child(2n+2) {
    background-color: #fbd8e3;
}

.padrightbtmleft {
    padding: 0px 15px 5px 15px;
}

/* pink bars */
.pinkbg {
    background-color:#fbd8e3; 
    padding-left:10px; 
    overflow:hidden;
}

.pinkbg h2, .pinkbg h3, .pinkbg h4, .pinkbg h5 {
    padding-left: 10px;
    line-height: 1em;
}

/* tablesection in content */
.tablesection {
    border-bottom: 4px solid #fbd8e3;
    background-image:url(graphics/forcewhite.gif);  
}

.tablesection p {
        padding:0px 5px 5px 20px;
}

.tablesection h2, .tablesection h3, .tablesection h4{
    padding-left:20px;
}

div.tabletop    {
    border-bottom: 4px solid #fbd8e3;
    background-image:url(graphics/forcewhite.gif);  
    overflow:hidden;
    padding-left: 20px;
}

div.tabletop p {
    padding-right: 10px;
    padding-top: 5px;
}

div.tabletop img {
    padding:20px 20px 20px 0px;
    float:left;
    vertical-align:middle;
}

.tabletop br {
    padding:10px 0px 10px 0px;
}

/* responsive video */
.video {
    position: relative; 
    padding: 30px 20px 56.25% 20px; 
    height: 0; 
    overflow: hidden; 
}

.video iframe {
    position: absolute; 
    margin-left: 20px;
    top: 0; 
    left: 0; 
    width: 95%; 
    height: 95%; 
}

div.imageleft div.video iframe {
    margin-left: 0px;
}


img.imageleft-text-align {
    float: left;
    padding: 0px 20px 20px 20px;
}

img.imageleft, img.imageleft-text-align, img.pictureleft {
    max-width: 90%;
    height: auto;
    width: auto\9; /* ie8 */
}

.imageleft + p, .imageleft-text-align + p, .pictureleft + p {
clear: both;}

/* Ad on the bottom of pattern pages */

.bottom-ad {
    margin-left: 20px;
}

/* Right side menu */
#sidebar {

    width: 100%;
    clear: both;
    margin-left: 0;
    background: #fbd8e3;
}

#sidebar ul {
    list-style: none;
    border-top: 3px solid #fff;
    padding-left: 0px;
}

#sidebar li {
    border-bottom: 3px solid #fff;


}

#sidebar a, #sidebar a:visited { 
    padding: 15px 5px 15px 15px;
    display: block; 
    text-decoration: none;
    background: #fbd8e3;
    padding-left: 20px;
}

#sidebar a:hover, #sidebar a:active, #sidebar a:focus { 
    background: #f32a78;
    color: #FFF;
}



/* footer */

#footer {
    margin-top: 0px;
    padding-top: 0px;
    color: #EEE;
    width: 100%;
    background: #78072c;
}

#footer ul {
    list-style: none;
    padding-left: 0px;
    margin-top: 0px;
}

#footer li {
    border-bottom: 3px solid #fff;
}

#footer li a, #footer li a:visited { 
    padding: 15px 5px 15px 20px;
    display: block; 
    text-decoration: none;
    background: #78072c;
    color: #EEE;
}

#footer li a:hover, #footer li a:active, #footer li a:focus { 
    background: #f32a78;
    color: #111;
}

#footer a, #footer a:visited { 
    padding: 0px;
    display: inline; 
    text-decoration: none;
    background: #78072c;
    color: #EEE;
}

#footer a:hover, #footer a:active { 
    background: #f32a78;
    color: #111;
}

.downloaded  { 
padding: 10px; display:none;

}

.menu {
    clear: both;
    margin-left: 0;
}

img.imageleft {
    float: left;
    padding: 20px;
}

div.imageleft {
    float: left;
    padding: 20px 20px 0px 20px;

}

div.imageleft p {
    padding-left: none;
    margin: none;
}

.fluid div.imageleft {
    float: left;
    padding: 20px 20px 0px 20px;
}


.pictureleft {
    float: left;
    padding: 20px;
}

.clear {
    clear:both;
    width: 100%;
}

#whitebox {
    width: 100%;
    background-color: #fff;
}

.center {
    width: 100%;
    align:center;
}



        ul.polaroids2 {width:90%;}
        ul.polaroids2 li { display: inline; }
        ul.polaroids2 a {height: 150px; background: #fff; display: inline; float: left; margin: 0 0 27px 0px; width: 100px; padding: 10px; text-align: center; , sans-serif; text-decoration: none; color: #333; font-size: 14px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);  -webkit-transition: -webkit-transform .15s linear;  }
        ul.polaroids2 img { display: block; width: 100px; margin-bottom: 12px; }
        ul.polaroids2 a:after { content: attr(title); }


        ul.polaroids2 li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }

.zeroMargin_mobile {
margin-left: 0;
}

/* hide on mobile */

.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 1024px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
    width: 97.5%;
    padding-left: 1.25%;
    padding-right: 1.25%;
    clear: none;
    float: none;
    margin-left: auto;
}

#header img { min-height:90px;}

#content {


}


.downloaded {display:none;
}

.menu {
clear: both;
margin-left: 0;
display: block;
}
.imageleft {
}
.clear {
width: 100%;
}

.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}


}

/* Desktop Layout: 769px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
img.imageleft + p, img.imageleft-text-align + p, img.pictureleft + p {
clear: none;}   


#content {

float: left;
width: 75.64935064935065%;
display: block;
padding-right: 0px;
}

.gridContainer {
    width: 93.4166%;
    padding-left: 0.7916%;
    padding-right: 0.7916%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
}

/* Header Title */
header#header h1{
    color: #000;
    line-height: 45px;
    font-size: 2.5em;
}

.search {
    padding-top: 0px;
    display: block;
    float: right;
    }

    .search form {
    margin-right: 5px;
}

.search input {
    height: 25px;
}

.searchgallery {
    padding-top: 0px;
    display: block;
    float: right;
    }

    .searchgallery form {
    margin-right: 5px;
}

.searchgallery input {
    height: 25px;
}

span.hide_mobile {
    display: inline;
    margin: 10px 5px 0px 15px;
} 

#mobile-menu-link {
    display: none;
}

#social {
    display:block;
    float:right; 
    padding:15px 15px 0px 10px

}

#social span {
    position: relative;
    font-weight: 700;
    top: 6px;
}

#socialbuttons { 
padding-left:20px;
 }

 #breadcrumbs img {display:inline;}


 #breadcrumbs {background-color:#fbd8e3;
padding:20px 0px 5px 20px;
line-height: 45px;
display: block;}



#breadcrumbs li {list-style:none; display: inline;

}

#breadcrumbs ol {margin:0; padding:0;
}

#breadcrumbsgallery img {display:inline;}


 #breadcrumbsgallery {background-color:#fbd8e3;
padding:20px 0px 5px 20px;
line-height: 45px;
display: block;}



#breadcrumbsgallery li {list-style:none; display: inline;

}

#breadcrumbsgallery ol {margin:0; padding:0;
}


.hide_mobile {display:block;}

/* Right side menu */
#sidebar {
    height: 100%;
    float: left;
    background: #fbd8e3;
    padding-bottom: 10px;
    width: 24.35064935064935%;
    clear:none;
    display: block;
}

#sidebar ul {
    list-style: none;
    border: 3px 0px 0px 0px solid #fff;

}

#sidebar li {
    border: 0px 0px 3px 0px solid #fff;

    }

#sidebar a, #sidebar a:visited { 
    padding: 5px 5px 5px 15px;
    display: block; 
    text-decoration: none;
    background: #fbd8e3;
    padding-left: 15px;
}

#sidebar a:hover, #sidebar a:active, #sidebar a:focus { 
    background: #f32a78;
    color: #FFF;
}

.sideblank {
    padding: 15px 5px 5px 15px;
    display: block; 
    background: #fbd8e3;
}



.downloaded {display:none;
}
.menu {

clear: none;
display: block;
}

.clear {
clear:both;
overflow:hidden;
}


.center { text-align:center;

 margin-left: 0;
}

.zeroMargin_desktop {
margin-left: 0;
}

.hide_desktop {
display: none;
}

.tablesection {margin-right:3px;}

.tabletop { margin-right:3px;}

.pinkbg {margin-right:3px;}

/* footer */
#footer {
    color: #EEE;
    padding: 20px 0;
    background: #78072c;
    text-align:center;
}

    #footer li {
    display: inline;
    border-bottom:0px;
    }

#footer a {
    color: #EEE;
    padding: 0px;
}

#footer a:hover, #footer a:active, #footer li a:hover, #footer li a:active { 
    background: #fbd8e3;
    color: #111;
}

#footer li a, #footer li a:visited { 
padding: 5px 5px 5px 5px;   
    display: inline; 
    background: #78072c;
    color: #EEE;
}


#flower_gallery {
    width:68%;
}


}

@media screen and (min-width: 1233px){
.gridContainer {
    width: 1232px;
    }

    #flower_gallery {
    width:55%;
}   
}

@media print {
.print {
    visibility:visible;
}   

.downloaded {
    display:inline;
    padding-left: 20px;
}

#mobile-menu-link,
#breadcrumbs,
#sidebar, 
#searchbox, 
#header, 
#footer, 
#socialbuttons, 
.noprint, 
.search {
    display:none;
}

.tabletop, 
.tablesection {
    margin: 0px;
    border: none;
    background-image:none;
 }

div.tabletop img {
    padding: 10px; 
    margin: none; 
    border: none; 
    float: left; 
    vertical-align: middle;  
    max-width: 100% !important; 
    page-break-inside: avoid;

}

This is the html template I use when I upload new knitting patterns

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow" />
<meta name="pearltrees" content="ignore">
<!-- TemplateBeginEditable name="doctitle" -->
   <meta name="Description" content="Free knitting pattern for">

<title>Untitled Document</title>
<!-- TemplateEndEditable -->

<link href="../boilerplate.css" rel="stylesheet" type="text/css">
<link href="../styles.css" rel="stylesheet" type="text/css">


<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->


<script type="text/javascript">

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-444378-1']);
  _gaq.push(['_setDomainName', 'knitting-and.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">
//<![CDATA[
  (function() {
    var shr = document.createElement('script');
    shr.setAttribute('data-cfasync', 'false');
    shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
    shr.type = 'text/javascript'; shr.async = 'true';
    shr.onload = shr.onreadystatechange = function() {
      var rs = this.readyState;
      if (rs && rs != 'complete' && rs != 'loaded') return;
      var apikey = '2ebe31ec8d88deb55217024f7a240eea';
      try { Shareaholic.init(apikey); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(shr, s);
  })();
//]]>
</script>


</head>
<body  itemscope itemtype="http://schema.org/WebPage" >
<div class="gridContainer clearfix">  <div><header id="header"><a href="../index.html"><h1>Knitting-and.com</h1></a></header>  <div ID="social" class="noprint"><span>Find me on</span> <a href="http://youtube.com/knittingand" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Youtube','','http://www.knitting-and.com/graphics/ytpink.png',1)"><img id="Youtube" src="../graphics/ytorange.png" alt="Knittingand on Youtube"></a><a href="https://plus.google.com/b/110085741462204316243/110085741462204316243/posts" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('GPlus','','http://www.knitting-and.com/graphics/gpink.png',1)"><img id="GPlus" src="http://www.knitting-and.com/graphics/gorange.png" alt="Knitting-and.com on Google Plus"></a><a href="http://pinterest.com/knittingand" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Pinterest','','http://www.knitting-and.com/graphics/pinpink.png',1)"><img id="Pinterest" src="http://www.knitting-and.com/graphics/pinorange.png" alt="Knittingand on Pinterest"></a></div>
</div>


<div id="breadcrumbs">
<ol>
  <li><img src="../graphics/you-are-here.jpg"  alt="You are here"/>  </li>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="../index.html"><span itemprop="title">Home</span></a></li>&nbsp;&gt;
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="../knitting/index.html"><span itemprop="title">Knitting</span></a></li> &gt; <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="../knitting/allpatterns.htm"><span itemprop="title">Free Knitting Patterns</span></a></li> &gt; <li><script type="text/javascript">
    document.write(document.title);
</script></li></ol></div>   

<div id="search-menu-bar">


<div class="search"><div id="mobile-menu-link"><a href="#sidebar">Menu</a></div><form action="http://www.knitting-and.com/search/results.html" id="cse-search-box"><span class="hide_mobile">Search for more free knitting patterns</span>
            <input type="hidden" name="cx" value="partner-pub-7310548297723934:3996133800" />
           <input type="hidden" name="cof" value="FORID:10" />
           <input type="hidden" name="ie" value="UTF-8" />
           <input type="text" name="q" size="25" />
           <input type="submit" name="sa" value="Search" />



</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script></div></div>


<div id="whitebox" class="fluid">

<div id="content" class="fluid" itemscope itemtype="http://schema.org/CreativeWork">
<div id="title" class="pinkbg"><!-- TemplateBeginEditable name="title" --><h1 itemprop="name">Title</h1><!-- TemplateEndEditable --> 
</div><div id="socialbuttons">
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='4740285'></div>
</div><p class="downloaded">This file was downloaded from <SCRIPT LANGUAGE="JavaScript">
       <!--
      {
       document.write(location.href);
      }
      // -->
</SCRIPT></p>



  <div class="imageleft"><!-- TemplateBeginEditable name="Picture" -->Image goes here<!-- TemplateEndEditable --></div>

<div class="imageleft noprint">
<style>
.responsive-sitewide-in-content { width: 320px; height: 100px; }
@media(min-width: 500px) { .responsive-sitewide-in-content { width: 468px; height: 60px;   } }
@media(min-width: 800px) { .responsive-sitewide-in-content { width: 336px; height: 280px;   } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive sitewide in content -->
<ins class="adsbygoogle responsive-sitewide-in-content"
     style="display:inline-block"
     data-ad-client="ca-pub-7310548297723934"
     data-ad-slot="9029985912"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div class="fluid clear">


<!-- TemplateBeginEditable name="Pattern" -->
<h3>Materials</h3> 

<h3>Gauge</h3> 

<h3>Abbreviations</h3>
<h3>Pattern</h3> 

<h3>Finishing</h3>

        <hr class="clear">
        <P>
          Copyright Sarah Bradberry Date Year. All rights reserved. You may not edit, 
          email, publish, or distribute the contents of this page in any form without 
          the prior permission of the copyright holder. If you would like to share 
          the information on this page you may do so by giving the link to this page 
        which is 
        http://www.knitting-and.com/knitting/patterns/.../file source.html </P> 
<!-- TemplateEndEditable -->
<div class="noprint bottom-ad"><p><style>
.banner-btf { width: 320px; height: 100px; }
@media(min-width: 500px) { .banner-btf { width: 468px; height: 60px; } }
@media(min-width: 800px) { .banner-btf { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Banner BTF -->
<ins class="adsbygoogle banner-btf"
     style="display:inline-block"
     data-ad-client="ca-pub-7310548297723934"
     data-ad-slot="2425049113"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p></div>
<img src="../graphics/width.jpg" alt=""/>
</div>
</div>

<div id="sidebar" class="fluid"> 
  <nav class="fluid menu">

   <ul>
<li class="hide_mobile hide_tablet"><a target="_blank" href="http://www.shareasale.com/r.cfm?b=533785&u=877126&m=29190&urllink=&afftrack="><img src="http://www.shareasale.com/image/29190/300x2502.jpg"  ></a></li>

<li><a href="../index.html">Home</a></li><li class="hide_mobile hide_tablet"><a href="../shop/patterns/index.html">Books &amp; Patterns by Sarah</a>
       <li><a href="../blog/">Blog</a></li>
       <li><a href="../butterfly/index.html">Butterfly Looms</a></li>
       <li><a href="../crochet/index.html">Crochet</a></li>
       <li><a href="../scrapbook/index.html">Edwardian Scrapbook</a></li>
       <li><a href="../embroidery/index.html">Embroidery and Sewing</a></li>
       <li><a href="../hairpin-lace/index.html">Hairpin Lace</A></li>

       <li><a href="../knitting/index.html">Knitting</a></li>
       <li><a href="../crafts/index.html">Misc Crafts</a></li>
       <li><a href="../gallery3">Photo Galleries</a></li>
       <li><a href="../recipes/index.html"> Recipes</a></li>
       <li><a href="../singercraft/index.html">Singercraft Guide</a></li>
       <li><a href="../small-looms/index.html">Small Looms</a></li>
       <li><a href="../spinning/index.html">Spinning</a></li>
       <li><a href="../tatting/index.html">Tatting</a></li>
       <li><a href="../teneriffe/index.html">Teneriffe Lace</a></li>
       <li><a href="../writing/index.html">Writing</a></li>

<li>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive right sidebar -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7310548297723934"
     data-ad-slot="1584084311"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</li>

<li class="hide_mobile hide_tablet"><a href="http://referrals.trhou.se/sarahbradberry"
 target="_blank">Learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. 50% off your first month.</a>
<a href="http://referrals.trhou.se/sarahbradberry" target="_blank"><img src="http://wac.a8b5.edgecastcdn.net/80A8B5/static-assets/assets/content/referral-badge-green.png"/></a></li>

<li class="sideblank hide_mobile hide_tablet"><h3 class="widget-title">My Other Sites</h3></li>
     <li class="hide_mobile"><a href="http://www.sarahsvintagekitchen.com"><img src="../graphics/kitchen.png" alt="The Vintage Kitchen" /></a></li>
     <li class="hide_mobile"><a href="http://www.illustratorfreebies.com"><img src="../graphics/illustrator.png" alt="Illustrator Freebies dot com" /></a></li>

      <!-- end .sidebar1 -->

    </ul>

  </nav>
</div>
</div>

<footer id="footer" class="fluid">
<ul>

<li class="hide_mobile hide_tablet"> <a href="https://plus.google.com/b/110085741462204316243/110085741462204316243/posts" rel="publisher">Knitting-and.com on Google+</a></li>


<li><a href="../privacy.htm">Privacy Statement</a> </li>

<li><a href="../intro.htm">About Me</a></li><li> <a href="../contact.htm" >Contact Me</a> </li>

<li class="hide_mobile hide_tablet"><a itemprop="url" href="../index.html">Home</a>  </li>

</ul>

<p class="center">&copy; by <A HREF="https://plus.google.com/107846611382804812996" rel="author">Sarah Bradberry</a>. All rights reserved.
</p></footer>
</div></body>
</html>

Any help would be greatly appreciated. It's not essential that I fix it, but I'd really like to.

Look into the Clearfix trick In the CSS foundations deep dive or google it. This should help with the issue.

Sarah Bradberry
Sarah Bradberry
7,115 Points

Thanks for your help Nick. I used clearfix plus Jason's tip together and it looks perfect. Or at least the way I wanted it to :)

2 Answers

Sarah Bradberry
Sarah Bradberry
7,115 Points

Thanks Nick. Unfortunately that doesn't work.

For some reason, setting the height of the #whitebox div to 100% is making the height of the div the height of the viewport so using clearfix isn't having an effect.

That's a whole lot of html and css. I think we need vertical scrollbars on the code blocks.

So is your problem that if the content is longer than the sidebar, you want the pink color of the sidebar to extend all the way down to the footer?

If so, this is an equal column heights problem. There's several different methods to do this and you can do a search for "equal column heights" if you'd like to research them.

The one I use involves setting a really large bottom-padding on your sidebar column and also giving it your pink background color. Then you set an equally large negative margin bottom to bring the document flow back up to where your sidebar ends. Then you set overflow: hidden; on your containing element in order to hide all the extra pink bottom padding that would extend past your footer.

Here's some css you can add to your existing rules:

#whitebox {
overflow: hidden;
}

#sidebar {
padding-bottom: 9999px;
margin-bottom: -9989px;
}

I noticed that you had set a bottom padding of 10px on your sidebar. In order to maintain that 10px with this technique you have to make the margin 10px less. Instead of bringing the margin all the way back up to the content, we stop short by 10px. This will play a role when your content is shorter than the sidebar. You'll be able to maintain that 10px between sidebar and footer.

Well, I hope that was what you were trying to do.

Sarah Bradberry
Sarah Bradberry
7,115 Points

Thanks, yes that's what I wanted to do. Sorry about all the code. The site is just entering 19 years online and whenever I update the design I have to follow up by making sure I haven't repeated too much css (I haven't got to the tidying up the css part yet).

I'm beginning to think there's something hinky going on in my html because while your fix is making the column longer, once I add overflow: hidden; to #whitebox; the whole thing shortens to the height of the viewport again. Even using clearfix.

Sarah Bradberry
Sarah Bradberry
7,115 Points

Aha! I've got it! Thank you! I need to use both Nick's suggestion of using clearfix, and your solution, and not set the height of #whitebox at all and it's perfect.