Many floating DIVs same height [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have such situation: http://jsfiddle.net/HKHS3/
The question is how to make divs appear row after row where all divs in one row have the same height, depending on actual content of the tallest one?
So, depending on body's width the number of divs in a row will vary but each time the div right after the end of row should kind of clear floating and start a new row.

Answer 1

Fixed number per row
You can do this by creating a row type div to wrap your inner div elements.
First you need to restructure your HTML, something like this:
<div class="row">
<div>abc</div>
<div>adb djhf kdfhv fkjsh vhf jhds fjhf jh fjhf jh fdjh dh</div>
<div>dhfjgh jfh gkjhfde jghf jgh jfdh gjfhd gjfdhg jfhd gjdhf jhg djhg jdh gjhfd</div>
</div>
(you can add more rows like this as you need to)
Then the following css should do what you need:
.row {
display:table-row;
}
.row > div {
width: 100px;
display:inline-block;
vertical-align:top;
border: 1px solid black;
margin: 5px;
height:100%;
}
Here is your example updated
Dynamic number per row (not perfect)
The problem with the above method is that it requires you to have a fixed number of div elements per row. If you wanted it to be dynamic and wrap then you will have a problem doing this with just CSS alone. The closest you could get to it would be as follows:
div {
width: 100px;
display:inline-block;
vertical-align:top;
margin: 5px;
}
But the elements do not all have the same height, it is just you cannot tell that without the border. Due to this, adding a border, background-color or any other style that shows the element's height will break the effect.
Here is an example of this
Exactly as required (requires javascript)
It is worth mentioning that the effect you want is doable using javascript. I wont include an example of this because the actually implementation will depend heavily on how your real HTML is set up.
Actually, I had a quick go at the javascript approach, it uses JQuery though, and can likely be optimised too:
function updateHeights() {
var maxHeight = 0, lastY = 0, rowDivs = [], allDivs = $("div"), count = allDivs.length;
allDivs.each(function (i) {
var div = $(this), offset = div.offset(), y = offset.top, x = offset.left, h = div.height();
if (h > maxHeight) maxHeight = h;//store the highest value for this row so far
if (lastY == 0) lastY = y;//get the y position if this is the first element
//if new row
if (y > lastY) {
resizeElements(rowDivs, maxHeight);//resize all elements on this row
rowDivs.length = 0;//reset the array of row elements, ready for next row
maxHeight = h;//set maxHeight to first of new row
}
lastY = y;//store current y posible for checking if we have a new row or not
rowDivs.push(div);//add current element to row collection
//check if last item, is so then resize this last row
if(count - 1 == i)
resizeElements(rowDivs, maxHeight);
});
}
function resizeElements(elements, height) {
for (var i = 0; i < elements.length; i++) {
$(elements[i]).height(height);
}
}
$(window).resize(function () {
updateHeights();
});
updateHeights();
Here is a working example

Answer 2

It is very simple using jQuery. For all divs in same row give single class. Lets say 'sameheight' in my example. Then use this jQuery.
$(document).ready(function(){
var maxHeight = 0;
$(".sameheight").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".sameheight").height(maxHeight);
});
For multiple rows repeat the code with different class.
Hope this solves your issue.

Answer 3

try this
<script type="text/javascript">
$(document).ready(function () {
var maxHeight = 0;
$('div').each(function () {
var this_div = $(this);
if (maxHeight < this_div.height()) {
maxHeight = this_div.height();
}
})
$('div').css({ 'height': maxHeight.toString() });
})
</script>