'Stretch' background image within a div - 100% height

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.

Not sure but I think "faux" columns are what you're after, google on that. — user17753, Mar 02 '12 at 21:51
possible duplicate of [Expanding the parent container with 100% height to account for any floated content](http://stackoverflow.com/questions/9446988/expanding-the-parent-container-with-100-height-to-account-for-any-floated-conte) — animuson, Mar 02 '12 at 22:02

score 1 · Accepted Answer · edited Mar 03 '12 at 19:42

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.

edited Mar 03 '12 at 19:42

FelipeAls

21,711
8
54
74

answered Mar 02 '12 at 21:59

Bluest_Cube

98
7

Or just `overflow:auto` on the container (with no fixed height). – Phrogz Mar 02 '12 at 22:03

score 0 · Answer 2 · answered Mar 02 '12 at 22:28

This clearfix style I found worked well and it's shorter:

http://nicolasgallagher.com/micro-clearfix-hack/

And I believe this article on Faux Columns will help you with developing background columns:

http://www.alistapart.com/articles/fauxcolumns/

Hope that helps,

Cheers!

'Stretch' background image within a div - 100% height

2 Answers2