A CSS way of using on divs without heights?

Question

I used to add <br clear=all> at the end of a div, without a height value in CSS, to set it's height.

The divs shrink and grow depending on the content.

Is there a more eloquent way of setting the div heights of all boxes to the height of the tallest box, without using <br clear=all>? Baring in mind the divs change height depending on what is inside them.

Here's an example of the code:

<div class="welcomeText">
  <div class="houseTiles2">
    <h1>TITLE<br><br></h1>
    <p><br>Body copy 1</p><br clear="all">
  </div>
  <div class="houseTiles">
    <h1 class="tileTitle">Title 2</h1><br>
    <p class="tileDesc">Text text text text text text text text</p>
 <br clear="all">
  </div>
  <div class="houseTiles">
    <h1 class="tileTitle">Title 3</h1><br>
    <p class="tileDesc">Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p><br clear="all">
  </div><br clear="all">
</div>

Answer 1

You should be using

<br style="clear: both">

as the clear attribute is depreciated. It's not very eloquent, though.

A more eloquent of achieving the same thing is to use a class:

.clear {
  clear: both;
}

Another way is to put the following class on your containing element:

.container {
  overflow: hidden; /* can also be "auto" */
}

Then there's the "clearfix" method, which you place on the containing elements:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

You can read more there: http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

EDIT: If you want the divs to be the same height, and you're targeting IE10+, you can use the flexbox. Very easy: http://learnlayout.com/flexbox.html

There's an interactive tutorial on flexbox here: http://cvan.io/flexboxin5/

Answer 2

The best possibility is to use clearfix method :

.welcomeText:before, .welcomeText:after {
   content:"";
   display:table;
}

.welcomeText:after {
  clear:both;
}

At the beginning of CSS we used a div with "clear:both" property

But now with the CSS we can use pseudo element that are like elements inside the div but created with CSS.

You can read any article about clearing float. for example : this one explains the problem with floats : http://diywpblog.com/when-and-how-to-use-a-clearfix-css-tutorial/

But this is not the answer you are attended, because you want that all child div take the same height as the parent div.

You can use display:table on the parent and display:table-cell on it's children, but remove float:left;

Answer 3

Making the div's have the same height automatically isn't possible with CSS (unless you give a fixed height).

However, it is with jQuery (to make the div's the same height):

var heights = [];

$(".houseTiles, .houseTiles2").each(function() {
    heights.push($(this).height());
});

var biggestheight = Math.max.apply(null, heights);

$(".houseTiles, .houseTiles2").each(function() {
    $(this).css("height",biggestheight);
});

As shown in this JSFiddle demo.

For a floated element to have a height you can give them the following CSS:

.houseTiles, .houseTiles2 {
    display:table;
    overflow:hidden;
}

That also clears the float, as you're doing with clear=all or clear:both.