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

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

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!