A CSS way of using <br clear=all> on divs without heights?
This question already has an answer here:
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/
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 ;
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 .