Dynamic DIVs with same height

Question

Possible Duplicate:
How to make floating inner divs the same height as the highest div

I have a variable amount of DIVs with variable content (the content is pulled in via api). They are all float: left. You can find an example here: http://playgrounds.affiliate-howto.de/

As you see, if the description in one DIV is shorter than the other ones, the design is broken.

I'd prefer to fix this with CSS but couldn't find a solution. If there is none, JS is also okay...

Can you give all items the same height? `.sh_item { height: Npx; }` — mrtsherman, Mar 30 '12 at 21:05
Design your site to work with the content that you have. This is a problem of bad design. — Matthew Darnell, Mar 30 '12 at 21:17
The problem is, I do not design the site or the content. I create the plugin that is pulling the content from the API to the wordpress site of the user. So I don't know how much and what content there will be. And I want to get a solution that works without forcing the user to change the code. — nucci, Mar 30 '12 at 21:54
Cant you just tell him to add a little CSS? This takes 3 seconds to do. — Shawn31313, Mar 30 '12 at 22:00
This question comes up a lot; just to be clear doing some research doesn't hurt, a good answer [can be found here](http://stackoverflow.com/questions/873781/how-to-make-floating-inner-divs-the-same-height-as-the-highest-div) — sg3s, Mar 31 '12 at 11:12

score 2 · Answer 1 · edited Mar 30 '12 at 21:31

You can just set the all of the boxes to 312px which is its current size.

You can do it with CSS:

<style type="text/css">
.sh_item{
height:312px important;
}
</style>

Or you can do it the JavaScript (jQuery) way:

<script type="text/javascript">
 $(document).ready(function(){
   $('.sh_item').css('height', '312px');
 });
</script>

Also just a little tip, when using IDs you shouldn't have the same one in the document more than once because CSS will not find the element (it will only find the first element and the rest with the same IDs will be ignored).

For example for each item you're using sh_id. ID is an attribute to give an element a unique ID, so giving all of the elements the same ID wouldn't work properly with CSS nor is it the point of IDs. You could do sh_id1, sh_id2, sh_id3 etc. But it is your choice. If you want to give multiple elements the same style, use the class attribute.

Hope this helps :)

Thank you for the answer. Yes I know it's not meant to have a unique ID more than once. But the DIVs are created through the php script. What it is doing is, it "reads" the shop on spreadshirt.net via api and creates a DIV for every product it "receives". So as there are a lot of different shops and products it is not an option to set the height as a parameter. It has to be dynamic and has to be the height of the tallest "container"... — nucci, Mar 30 '12 at 21:40
Then use the javascript method. It will still resize them correctly. — Shawn31313, Mar 30 '12 at 21:54

score 1 · Answer 2 · answered Mar 30 '12 at 21:05

1

You can use 'min-height' CSS attribute in order to make the DIVs not less than a certain size (i.e. height)

answered Mar 30 '12 at 21:05

Eugene Retunsky

13,009
4
52
55

Yes, but if I do so and I got a DIV with more Information tha is higher than min-height, I'm in the same place as now. And instead of using min-height, I can give all the DIVs the same height value. But that won't look good if there is fewer content in the box and too much whitespace. So this is not an Option... – nucci Mar 30 '12 at 21:10
You need to limit the product description then. For example at max it can have two lines. In this case min-height can help (for titles which take only one line). For this you can limit the max-height of the element with the title. – Eugene Retunsky Mar 30 '12 at 21:13

score 0 · Answer 3 · answered Mar 30 '12 at 21:10

0

I had the same issue on my site once. This solution was helpful for me (works on many browsers, also not supporting min-height style, like IE6): http://www.impressivewebs.com/equal-height-columns-with-javascript-full-version/

answered Mar 30 '12 at 21:10

Marek

1,688
1
29
47

score 0 · Answer 4 · answered Mar 30 '12 at 21:37

Addition to Shawn31313's answer, you shoud give a specific height to your "sh_name" class like "25px" and add overflow:hidden just to prevent overlapping text.

You can also trim your text by using PHP and add "..." if you get longer text than you expect.

Dynamic DIVs with same height

4 Answers4