Question

I was hoping you could help me find a solution to a problem I’m having after trying out Matthew James Taylor’s equal height columns using pure css.

I’m trying to add a border-bottom to a column when hovered over by the user (see image: 1). The problem I’m having is that as these DIV‘s are nested the borders seem to stack on top of eachother (see image: 3). I’m trying to have all the borders on an even level as the effect I’m going for would have them overlap with the gray line

Furthermore, the grey horizontal line in the image would stretch to 100% width of the page and would be on an even level with the black border-bottom. When not hovering over any of the titles (hi there!, contact, twitter) I’d like the columns with content to slide up until only the titles are visible, this would be the only thing I’d like to use Javascript. Perhaps all of this isn’t possible using just CSS, or maybe there’s a better way of doing it?

**

Answer 1

It looks like this would be solved far more easily with display: table than the CSS trickery you are currently using.

http://jsfiddle.net/rrPKA/

#container { display: table; }
.row { display: table-row; }
.row > div { 
    display: table-cell; 
    width: 100px; 
    border-bottom: 1px solid lightgray;
    padding-left: 10px;
}
.row > div:hover { border-bottom: 1px solid gray; }