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

In addition to adding the background color to the container, you'll also need to make the container take up the space of the children.

You can add float:left to the container like Richard's answer or If you don't want to make the container float, you can add an empty "clear" div afterwards. It's less semantically correct, but if you can't or don't want the container floated it's another option.

JsFiddle: http://jsfiddle.net/gvJrJ/4/

Answer 2

As you said, the problem with using a faux background with your #iconHolder is highlighting each column on mouseover.

So here's what I suggest:

1) make individual faux columns absolutely positioned at the same location as the original column

You'll use the z-index property to ensure the content is on top

The HTML

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>

<div id="faux1"></div>
<div id="faux2"></div>
<div id="faux3"></div>

The CSS

#iconHolder {
    position: relative;
}

#col1, #col2, #col3 {
    position: relative
    z-index: 100;
}

#faux1, #faux2, #faux3 {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #DDD /* don't add a background to your real columns, just your faux */
    z-index: 50;
}

#faux2 {
    left: 20em;
}

#faux3 {
    left: 40em;
}

2) attach your onmouseover/onclick events to both the faux column AND the normal column

function highlight() {
     faux.style.backgroundColor = "yellow"
}

function whatever() {
    //your code here
}

column.onmousover = highlight
faux.onmouseover = highlight
column.onclick = whatever
faux.onclick = whatever

If you need more details on the javascript, just ask, I just wouldn't have any idea on the jQuery equivalent, though.

Yes, I realize that this is a little bit hackish, but it gets the job done without having to calculate the height or anything. Hope this helps!