How to make two separate columns the same length?

Question

I have two columns, one floats left, the other floats right.

The content will usually be different lengths, but the one with less content, always needs to be the same size as the one with more.

Here is an image of what currently happens:

Is there a way (without making both fixed) to ensure they stay the same height?

HTML:

 <div class="leftCol">
  <div class="singleArrow"></div>
      <div class="sectionBlock">
        <div class="sectionBlockContentNarrow"> 
                    SOME TEXT
        </div>
      </div>
  </div>
  <div class="rightCol">
  <div class="singleArrow"></div>
      <div class="sectionBlock">
        <div class="sectionBlockContentNarrow"> 
                    SOME TEXT
        </div>
      </div>
  </div>

CSS:

.singleArrow{
    margin:0 auto;
    width:50px;
    height:23px;
    background-image:url('../images/downarrow-lrg.png');
    background-repeat:no-repeat;
    margin-top:20px;
    margin-bottom:20px;
}

.leftCol{
    float:left;
    width:300px;
}

.rightCol{
    float:right;
    width:300px;
}
.sectionBlock {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 100%;
    min-height: 40px;
    background-color: rgb(246,246,246);
    margin-top: 20px;
    background-image: url('../images/bar.png');
    background-repeat: repeat-x;
    padding: 4px 0 0 10px;
    padding-bottom:20px;
    }

.sectionBlockContent{
    padding: 30px 20px 10px 30px;

}
.sectionBlockContentNarrow{
    padding: 30px 10px 10px 10px;

}

@Paulie_D Unfortantly, I couldn't get that method to work, it just seems to make it ignore the width setting and fills out to 100%. — MRC, Apr 29 '14 at 12:33

score 2 · Accepted Answer · answered Apr 29 '14 at 12:36

2

You can choose 2 variants

1.) JS (imho the best)

$(window).load(function() {
    //call the equalize height function
    equalHeight($("div.left, div.middle, div.right"));

    //equalize function
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
});

2.) Bg styling (old school)

You need to cut 1 px bg from your PSD and put bg to the column container (repeat-y)

3.) Table (old school) HTML

 <div class="container">
        <div class="child">...</div>
        <div class="child">...</div>
        <div class="child">...</div>
    </div>

CSS

.container {
    display: table;
}

.child {
    display: table-cell;
    width: 33.33%;
}

answered Apr 29 '14 at 12:36

AlexPrinceton

1,173
9
12

Thanks, the table method was the one I were thinking about – MRC Apr 29 '14 at 12:42
1

@joey, that's the first one i proposed to you :( – G-Cyrillus Apr 29 '14 at 13:11
1

i do not think display table is old school it is in standard since 1998 , and only supported by IE8 , it has emanticly nothing to do with HTML table. list-item and table are values available for display and are defaut display of li and td , such as bloc is for div. :) – G-Cyrillus Apr 29 '14 at 13:16
May be Ill be wrong if say that I am not like using tables because there are not compatible with IE7. But I agreed "old school" is not proper description of my opinion – AlexPrinceton Apr 29 '14 at 13:28

G-Cyrillus · Answer 2 · 2014-04-29T13:05:39.670

1

you have a few options without using float:

display:table; on parent and display:table-cell on child. DEMO
display:flex on parent . DEMO
And the old but still solid technique of the faux-column : DEMO
& some other tricky ones too DEMO this one involves floatting element, or without pseudo element, same technique of overflowed hidden DEMO

edited Apr 29 '14 at 13:05

answered Apr 29 '14 at 12:34

G-Cyrillus

101,410
14
105
129

Flex isn't suitable as it also matches the width. The width must be set. – MRC Apr 29 '14 at 12:36
Flex is very new technique and almost has not support major browsers – AlexPrinceton Apr 29 '14 at 12:38
1

option are option not a must do :) – G-Cyrillus Apr 29 '14 at 12:45
1

@Joey thnks to give me some feed back on differents techniques i have shown you not involving javascript (do not be hitchy with flex, you'll love it one day ;) ) – G-Cyrillus Apr 29 '14 at 13:10

How to make two separate columns the same length?

2 Answers2