Problem with height of Ivs that do not accompany each other’s content

Question

I have a problem that I think is easy, but I can not understand how to solve.

I have a structure like:

 <div class="conteudo">
     <div class="esquerda">
     </div>
     <div class="direita">
     </div>
     <div class="clear">
     </div>
 </div>

Well, the CSS is very simple, the left class has float: left, the right has float: right, and to clear the clear:both;

So far so good, the problem is, the content of the Ivs, actually the one on the right, is dynamic, so what happens is that the left div doesn’t follow the height of the right one, and the background I apply is only the height occupied by the content of the left div, leaving the layout totally wrong.

Would anyone know a solution to this? It seems to me that one has to resort to js for this?

Answer 1

One solution would be to use the display table on parent div and display table-Cell on the strings, see the css:

.conteudo {
    display:table;
    width:auto;  
}

.esquerda {
    display: table-cell;
    vertical-align: top;
    width: 200px;
    background-color:#ccc;
}

.direita {
    display: table-cell;
    vertical-align: top;
    width: 200px;
    background-color:#ff0000;
    color:#fff;
}

.clear {
    clear: both;
}

But this will depend on how you want the end result. For example, we cannot use the float:right in the right-hand div.
See here the result: http://jsfiddle.net/Q2ZH2/

If that’s not enough, google the technique of Faux-Columns or Equal Height Columns.

Using Jquery is also possible.
Taking advantage of the solution of @Sergio down below:

$(windows).load(function(){
    $('.esquerda').height($('.direita').height());
});

I used windows load because we guarantee that all DOM elements were loaded, otherwise the "height" function would return 0.

Answer 2

Actually there is no need for js.

Use block and column structures to organize.

.block{
height:auto;
float:left;
clear:both;
display:block;
}
.column {
height:auto;
float:left;
clear:none;
display:inline-block
}

Use these classes to give block and column to your elements and a second class to give width and height if this is the case. With this type of block structure and having a container for the columns, your block that holds the columns will assume the height of the largest column ensuring alignment.

Prefer left alignment to avoid fixing to IE

Answer 3

I believe the solution here lies in display: table / table-row / table-cell like the @Philip referred.

However, to complete the answers and because jQuery is in the tags, here is a hint with jQuery. In this code you present there is only one div .esquerda and a div .direita. If there are more, my code needs to be adapted to something like this (link). But as it is in the question enough so:

http://jsfiddle.net/zYx87/

$('.esquerda').height($('.direita').height());

---

If your content is added dynamically, the only option I can think of with Javascript/jQuery is to have one setInterval looking for size changes in div .direita and makes the div .esquerda stay the same size. In terms of performance is not the most indicated, but works.

http://jsfiddle.net/zYx87/2/

var $direita = $('.direita');
var alturaInicial = 0;
$direita.on('resize change', function () {
    $('.esquerda').height($(this).height());
});

setInterval(function () {
    var novaAltura = $direita.height();
    if (alturaInicial != novaAltura) $direita.resize();
    alturaInicial = novaAltura;
}, 100);

Answer 4

A suggestion with flex would be to use like this:

.pai {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.pai > .coluna-1, .pai > .coluna-2 {
    width: 50%;
}

.pai > .coluna-1 {
     background: #f00;
}

.pai > .coluna-2 {
     background: #fc0;
}

<div class="pai">
     <div class="coluna-1">foo bar</div>
     <div class="coluna-2">
     foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
     </div>
</div>

The parent element is required, the properties are for older browsers such as old Androids and IE10/IE11:

display: -ms-flex;
display: -webkit-flex;

You can put as many columns as you want, just adjust the width in percentage based on the number of columns.

Of course this for browsers that support flex, so it depends on your project, you can check on caniuse browsers that make use of basic flex support:

• https://caniuse.com/#feat=flexbox