Hy there,I'm experiencing some (understanding) problems with some HTML & CSS of mine.I have multiple DIVs (.item) inside a parent DIV (.group). The height of those child DIVs depends on their content which is dynamic.Working example with static content: http://jsfiddle.net/YfDWL/HTML:\[code\]<div class="group"> <div class="item"> <div class="item-title">item 1</div> <div class="item-tag">tag1</div> </div> <div class="item"> <div class="item-title">item 2</div> <div class="item-tag">tag1</div> <div class="item-tag">tag2</div> <div class="item-tag">tag3</div> <div class="item-tag">tag4</div> </div> <div class="item"> <div class="item-title">item 3</div> <div class="item-tag">tag1</div> <div class="item-tag">tag2</div> </div></div><div class="group"> <div class="item"> <div class="item-title">item 1</div> <div class="item-tag">tag1</div> <div class="item-tag">tag2</div> <div class="item-tag">tag3</div> <div class="item-tag">tag4</div> </div> <div class="item"> <div class="item-title">item 2</div> <div class="item-tag">tag1</div> <div class="item-tag">tag2</div> </div> <div class="item"> <div class="item-title">item 3</div> <div class="item-tag">tag1</div> </div></div>\[/code\]CSS:\[code\].group { margin: 30px; padding: 10px; border: 1px dashed black;}.item { display: inline-block; border: 1px solid black; width: 100px; margin-right: 10px;}.item-title { text-align: center; font-style: italic; font-weight: bold;}\[/code\]What I would like to achieve is that all item DIVs inside a group should have the same height and should be aligned at the top. This brings me to a few problems:[*]The alignment
How can i align all item DIVs at the top of the group? Right now they are aligned at the bottom as you can see at the example...[*]The height
As I've seen in other questions it seems that this can't be done with pure HTML/CSS. Therefore I've decided to use a little JS with JQuery to correct the height of the elements.
Working example: http://jsfiddle.net/YfDWL/1/ JavaScript:\[code\]$(window).load(function() { "use strict"; var maxHeight; // Iterate through every group $('.group').each(function(idx, group) { maxHeight = 0; // Iterate through every item of the group and save the max height $(group).find('.item').each(function(idx, item) { var height = $(item).height(); if (!maxHeight || (height > maxHeight)) { maxHeight = height; } }); // Set the max height to all items inside the group if (maxHeight) { $(group).find('.item').css('height', maxHeight); } });});\[/code\]As you can see, this is working ok, but the alignment still is a problem...What I'd like to know now is where the alignment of the items comes from and how i could manage to put all items at the top of the group?Additionally I'd love to here suggestions if the "same height"-problem could be solved more elegently and maybe without JS at all...Thanks & best regards,
mik
How can i align all item DIVs at the top of the group? Right now they are aligned at the bottom as you can see at the example...[*]The height
As I've seen in other questions it seems that this can't be done with pure HTML/CSS. Therefore I've decided to use a little JS with JQuery to correct the height of the elements.
Working example: http://jsfiddle.net/YfDWL/1/ JavaScript:\[code\]$(window).load(function() { "use strict"; var maxHeight; // Iterate through every group $('.group').each(function(idx, group) { maxHeight = 0; // Iterate through every item of the group and save the max height $(group).find('.item').each(function(idx, item) { var height = $(item).height(); if (!maxHeight || (height > maxHeight)) { maxHeight = height; } }); // Set the max height to all items inside the group if (maxHeight) { $(group).find('.item').css('height', maxHeight); } });});\[/code\]As you can see, this is working ok, but the alignment still is a problem...What I'd like to know now is where the alignment of the items comes from and how i could manage to put all items at the top of the group?Additionally I'd love to here suggestions if the "same height"-problem could be solved more elegently and maybe without JS at all...Thanks & best regards,
mik