Как сделать две отдельные колонки одинаковой длины?

Question

У меня есть две колонки, одна плавает влево, другая плавает вправо.

Содержимое обычно будет разной длины, но с меньшим содержанием, всегда должно быть того же размера, что и у большего.

Вот изображение того, что в настоящее время происходит:

Есть ли способ (без и фиксировано), чтобы гарантировать, что они оставаться такой же высоты?

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; 

} 

Answer 1

Вы можете выбрать 2 варианта

1.) JS (IMHO лучший)

$(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 стиль (старая школа)

Вы должны сократить 1 пикс Б.Г. с вашего PSD и положить BG в контейнер колонке (повтор -y)

3.) Таблица (старая школа) 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%; 
} 

Answer 2

у вас есть несколько вариантов без использования float:

1. display:table; на родителей и display:table-cell на ребенка. DEMO
2. display:flex на родителях. DEMO
3. И старый, но все еще твердый методика искусственных колонок: DEMO
4. & некоторых других сложных из них слишком DEMO это один включает плавающое элемент, или без псевдо-элемента, то же техника разливалась скрытым DEMO