How to make a div height to fill available space

Question

I have a 3 column layout with some details below the columns.

You will not

Answer 1

Can this be done with HTML/CSS or do I have to use some JavaScript?

.. it can be done with pure CSS using display: table-cell.. but there is no iE7 and below support :(

Here's a solution using encompassing both methods (jQuery* and CSS), the jQuery would of course do the same thing for other browsers, but this solution means that most users would be getting a pure CSS solution with only IE7 and below needing the jQuery for "enhancement"

if you want to use the jQuery solution for all browsers then you would not need the table-cell or table-row display properties and you would need to remove the !ie7 hack from the float property - the floats would also need to be contained cross-browser so you could add overflow: hidden to the #iconsHolder div - and just leave zoom: 1; in place if you need this to work in IE6 ;)

CSS:

#content {
    width: 60em;
    margin: 0px auto;
}

#iconsHolder { 
    display: table-row; /* good browsers - IE7 and below ignore this */
    zoom: 1; /* for IE to contain the floats so the jQuery can get a height from it */
    /* overflow: hidden; would be needed here if jQuery solution is preferrred */
}

#info,#comp,#story {
    width: 18em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
    background-color: #DDD;
    display: table-cell;
    float: left !ie7; /* IE7 and below hacked value - remove the !ie7 part to expose this to all browsers */ 
}

#info_content,#comp_content,#story_content {
    text-align: center;
}

#details {
    clear: both;
    background-color: #EEF;
    padding: 1em;
}

HTML:

 

  

    

     

     
Some guy over here
     
It doesn't matter what is being said at the moment. Nothing is said here.
    
   
   

    

     

     
Computer Development
     
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    
   
   

    

     

     
Story telling
     
This is another short story.
    
  
 

  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

jQuery: (inside a conditional comment so only IE7 and below see it)

Added: JSfiddle

Note: the fiddle doesn't have the jQuery added in as I don't know how to put that in a conditional comment on the fiddle)

---

• ^{I apologise if you'd prefer a pure javascript solution, I can't do that - but I'm sure if that's what you want someone could add the pure JS to my answer for you!}