CSS: How do achieve two column heights that match the height of the column with the most content?

Question

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

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!

score 3 · Accepted Answer · answered Jan 15 '12 at 22:35

3

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/

answered Jan 15 '12 at 22:35

My Head Hurts

37,315
16
75
117

2

Thanks for pointing this! it is really helpful & should be marked as a correct answer :) – panosru Feb 13 '12 at 08:26
1

This solution is perfect! It really deserves more than the single upvote I can give it! – CodeMonkeyKing Apr 06 '12 at 06:13
1

It's working well, but I got a problem with the "width: 209px;", I can't click on item in the left column. I changed it for "width: 0; left: 209px" and it's working great. (Tested in Chrome, FF, IE8 and IE10) – Marc-André Bilodeau-Lamontagne Nov 18 '13 at 20:17

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

hope this links can help you!

http://positioniseverything.net/articles/onetruelayout/equalheight

How to have two columns that are the same height in HTML?

Setting a div's height in HTML with CSS

good luck!

edited May 23 '17 at 11:48

Community

1
1

answered Jan 15 '12 at 22:01

MCSI

2,818
26
35

score 0 · Answer 3 · answered Jan 15 '12 at 22:01

0

There is no simple included way to achieve your goal.

When you read this article, then you will learn 4 possible ways to do it and you can then decide what is the best way for your project.

answered Jan 15 '12 at 22:01

Sven Bieder

5,515
2
21
27

CSS: How do achieve two column heights that match the height of the column with the most content?

3 Answers3