Question

I’ve taken code from my site and simplified it and put in on jsfiddle to describe my problem a little better.

http://jsfiddle.net/5vMHC/3/

---

So what I’m tryin to do is have a border line seperating the left column from the right column, however I want the line to stretch to the height of the column with the most content. The way I have it setup now, I put border-left on the right column content, so if the content is smaller than the content in the left column, it only stretches to the height of the right column.

How can I make it stretch to length of the longest content? Would I have to make both columns equal to the longest? How do I go about doing this? Is my html structure okay? Thanks!

Answer 1

The easiest way to do this is to add a filler type element with the border and position it absolutely:

CSS

.filler {
    border-right:1px solid #CDE;
    width: 209px;                   /* width of #sub_page_left_column */
    position: absolute;
    bottom: 0;
    top: 0;
}

/* add position relative so filler is positioned in respect to this div */
#content {
    ....
    position: relative;           
    ....
}

HTML

<div id="content">
    <!-- add the new filler element -->
    <div class="filler"></div>  
    <div id="sub_page_left_column">...</div>
    <div id="sub_page_right_column">...</div>
</div>        

Right longer: http://jsfiddle.net/5vMHC/5/

Left longer: http://jsfiddle.net/5vMHC/6/