Equal Height Blocks for more than one DIV?

[moprivat]

Hi there, I´m looking for a quick possibilty to fix a little problem with equal height in different DIVs. One of them has three Boxes, the other one should have two. Is it possible to use Equal Height Blocks in Rows for more than one DIV? Or maybe you have some suggestions for another solution. Faux Columns etc. is known but because of the coding not possible to use ;-(.

Hope to hear from you soon!

Best to you,

Mo

[Paulie_D]

I can see it working with two wrapper divs. If they have the same height (via the Equal Heights method) then you could set the heights of the other ‘inner’ divs to 33% and 50% respectively.

Wouldn’t that work?

[Paulie_D]

I assume it looks something like this: http://jsfiddle.net/Paulie_D/CQ6eH/

[moprivat]

Hi Paulie, yes only horizontally.

The Problem is that within every wrapper div I will have the height of the largest box for the others. This is what it looks like right now:
http://entwurf.specialframe.com/images/pic.jpg

[Paulie_D]

So…like this then: http://jsfiddle.net/Paulie_D/QXTu7/1/

I would think that using the Equal height technique you could ascertain the height of the tallest sub-div and apply that to the class…no?

[Mottie]

There is actually an article here on CSS Tricks about this… check it out here.

Also, I’ve taken that code and converted it into a plugin, named Equalizer. Hopefully this will take care of what you need?

[moprivat]

Pauli, yes that´s it. But it doesn´t seem so easy for me because I´m not very familiar with javascript.

Mottie, i even made a plugin of the code of your CCS Tricks link to try to make some changes, but i failed on my javascript knowledge. The point is that I don´t know how to integrate to different DIVs doing the same routine -> looking for the tallest hight –> apply that hight to the smaller box.

Any ideas? For know i´m using for the DIV with two boxes with fix height, the 3 smaller boxes the script of CSS Tricks.

Hope to hear from you soon.

All the best,

Mo

[Mottie]

The only trick to the code from that post, and my plugin version, is that all of the divs should have the same class name.

If you want a script to do each row individually, then make the top two divs have the same class name and the bottom three have a different class name. There is also this example from jQuery’s map() instructions that will also equalize heights. It just looks for the “div” tag, so you’ll need to use the class name for each row, separately.

It would be easier to help you if you shared the HTML and javascript you are using.

[moprivat]

I Integrated your plugin. Let me change the code like you said. Then we´ll see ;-).

[moprivat]

Mhmm, with an id it works fine, using a class it failes. I must say that I´m just a little confused, because I tried different things the whole day long. SO thank´s a lot for your support!!!

Here is an extract:

WITH THIS ID IT WORKS -->


<-- WITH THE CLASS TEST IT WONT



bla bla bla


This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. 


This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. 








-->
<--



Unsere Kernkompetenzen:


 




Dauerhafte Haarentfernung


Body Contouring / Abnehmen mit Ultraschall


Kosmetik


Celullite Behandlungen


Permanent Makeup
















IPL-Dauerhafte Haarentfernung






This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. 




Body Contouring


This copy is used for placement only. It is not meant to be read. 






-->
<--



Cellulite Behandlungen


This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted.

.wrapper_content_top {

min-height: 400px;

clear: both;

background-image: url(Images/pattern.png);

background-repeat: repeat;

background-position: top;

overflow: hidden;

}



.height_content {

height: 400px;

overflow: hidden;

}



.left {

padding: 20px;

float: left;

width: 58%;

border: 1px solid #eee;

margin: 20px 0 30px 0;

background-image: url(Images/content_back.jpg);

background-repeat: no-repeat;

background-position: left bottom;

background-color: #FFF;

text-align: left;

}

.right {

padding: 20px;

float: right;

width: 30%;

border: 1px solid #eee;

margin: 20px 0;

background-color: #FFF;

text-align: left;

}

.wrapper_content_bottom {

clear: both;

background-repeat: repeat-x;

background-position: top;

min-height: 350px;

background-image: url(Images/patternstripes.png);

}

.boxleft{

margin-left: 0px;

}



.boxcenter {

margin-left: 30px !important;

}



.boxright{

float: right !important;

}



.height_boxes {

height: 320px;

overflow: hidden;

}

.boxes {

padding: 10px;

background-color: #fff;

border: 1px solid #eee;

width: 29%;

margin: 20px 0 70px 0;

float: left;

}

.box_shadow {

-webkit-box-shadow: 8px 10px 10px #dbddda;

-moz-box-shadow: 8px 10px 10px #dbddda;

box-shadow: 8px 10px 10px #dbddda;

}

[Mottie]

Oh yeah sorry, you are right! Equalizer needs to target the wrapper. And since there are two wrappers, you’ll need to initialize it like this:

$('#content_top, #content_bottom').equalizer();

And by the way, the “test” class isn’t needed for that plugin, unless you use the “column” option, just in case there are other elements inside of the content block that doesn’t need equalized:

$('#content_top, #content_bottom').equalizer({

columns : '.test'

});

[moprivat]

Mottie, awesome and that easy… It works fine. That´s it. If you are in Hamburg/Germany ons day, you´ll get a large Cup of Coffee :-).

Thanks a lot. Bye, Mo

[subbu]

Hello Moprivat,
I have used your code. But I didn’t find the JS file “jquery.equalizer.min.js” from anywhere. Could you help me where can I get the file?

Thanks for understanding.

[Mottie]

@subbu Download it from here: https://github.com/CSS-Tricks/Equalizer (I recently moved it from my repos over into the CSS-Tricks repos)

[subbu]

Hello Mottie,
Many thanks for your quick reply. Thank you. Very much.

[Author]

Posts