Problem with height of divs that do not follow each other's content

Question

Problem with height of divs that do not follow each other's content

Navigation

#1 by (5 votes)
#2 by (2 votes)
#3 by (2 votes)
#4 by (1 votes)

6

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

I have a structure of type:

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

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

So the problem is, the content of the divs, actually the right one, is dynamic, so what happens is that the left div does not match the height of the right one, and the background that I apply is only at the time occupied by the contents of the left div, leaving the layout totally wrong.

Would anyone know a solution to this? It seems to me that you have to resort to js for this?

javascript html jquery css

asked by anonymous 17.05.2014 / 16:09

4 answers

How to know the array key of the 3 biggest results? Why this code goes into infinite loop?

score 5 · Answer 1

One solution would be to use the table display in the parent div and display table-cell in flhos, see 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 can not use float: right in the right div. See here the result: link

If this is not enough, go to Google for the Faux-columns or Equal Height Columns technique.

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

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

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

score 2 · Answer 2

I believe that the solution here passes through display: table / table-row / table-cell like @Filipe mentioned.

However, to complete the answers and because jQuery is in the tags, here is a suggestion with jQuery. In this code that you present there is only one% div and one div .esquerda . If they are more, my code needs to be tailored for something like this (link) . But as you are in the question just like this:

link

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

If your content is dynamically added, the only option that occurs to me with Javascript / jQuery is to have a .direita that looks for size changes in the div setInterval and causes the .direita div to be the same size. In terms of performance is not the most indicated, but it works.

link

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);

score 2 · Answer 3

In fact 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 the width and height if this is the case. With this type of block structure and having a container for the columns, your block holding the columns will assume the height of the largest column ensuring alignment.

Prefer to give left alignment to avoid making fix for IE

score 1 · Answer 4

One suggestion with flex would be to use 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 width in percentage based on number of columns.

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

link