I have two columns. One is floated left, one is floated right. There is a clearing div following them and then a footer. I want a vertical line to divide the two columns but the problem is there is no guarantee of which column will be higher.
Without using a background image, how do I get a dividing line between the two columns that uses the maximum height of the two?
You could try setting a right border on the left floated div and a left border on the right floated div. You would then set a negative margin on the right floated div equal to the width of the borders. Using that method, the borders would overlap perfectly, making it look like a single line equal to the height of the tallest div.
UPDATE
Sounds like this is causing problems in IE. You could also try setting position on the column container to relative and then setting the position of the children to absolute. The left column would be top: 0 and left: 0. You would then position the right column top: 0 and right: (width of the left column - width of the border). IE might be able to handle that a little better.