Question

I currently have a two column layout with a header and a footer, the two columns are two DIVs that are floating and then cleared. My aim is to have a background behind the two DIVs and have it stretch down ‘100%’, to the footer of the page.

I have the two DIVs (left and right content) and I have another DIV surrounding those two divs (content holder) this is what will be holding my background image. It is currently expanding as long as I have content in the two floating DIVs.

My current CSS code is as follows:

* { 
  margin: 0; 
  padding: 0; 
} 

html, body, #wrap { 
  height: 100%;
} 

body > #wrap { 
  height: auto; 
  min-height: 100%; 
} 

#container { 
  width: 1500px;
  min-height: 100%; 
  margin: auto; 
} 

#header { 
  overflow: hidden; 
  background-color: red; 
  height: 100px; 
} 

#contentholder { 
  background-color: #FFE303; 
  min-height: 100%; 
} 

#contentleft { 
  float: left; 
  width: 18.7%;
  padding-left: 10px; 
  padding-right: 10px; 
  background-color:  #698B22; 
} 

#contentright { 
  float: left;
  width: 80%; 
  background-color: #964514;
} 

.clear { 
  clear: both; 
} 

#footer { 
  position: relative; 
  margin-top: -60px; /* same as height */ 
  height: 60px;  /* same as padding-bottom and margin-top */ 
  clear: both; 
  background-color: pink; 
} 

#contentmain { 
  padding-bottom: 60px; /* must be the same height as footer */ 
} 

And my HTML code is:

<div id="wrap"> 

<div id="container"> 

    <div id="header"></div><!--end header--> 

    <div id="contentmain"> 

        <div id="contentholder"> 

    <div id="contentleft"></div><!--contentleft--> 

    <div id="contentright"></div><!--contentright-->

    <div class="clear"></div><!--clear-->   

    </div><!--content main-->
        </div><!--content holder-->     

</div><!--container--> 

</div>

    <div id="footer"></div><!--footer-->  

I have already tried using min-height: 100% and height: auto within the contentholder DIV but this failed to work correctly.

Answer 1

Create these 2 selectors:

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display:block;
}

and then append a .clearfix class to the container you want to run down the page.

You can also use:

overflow: hidden;

if it won’t interfere with other functionalities of the site.