Grow your CSS skills. Land your dream job.

Equal Height Blocks for more than one DIV?

  • # June 7, 2012 at 9:09 am

    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

    # June 7, 2012 at 9:36 am

    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?

    # June 7, 2012 at 10:01 am

    A graphical representation of what you are trying to accomplish would help greatly with me understanding the problem.

    # June 7, 2012 at 10:11 am

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

    # June 7, 2012 at 10:59 am

    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

    # June 7, 2012 at 11:24 am

    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?

    # June 7, 2012 at 11:57 am

    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?

    # June 7, 2012 at 12:22 pm

    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

    # June 7, 2012 at 12:28 pm

    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.

    # June 7, 2012 at 12:45 pm

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

    # June 7, 2012 at 1:17 pm

    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.





    -->





    IPL-Dauerhafte Haarentfernung


    IPL


    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


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




    -->
    < --

    Cellulite Behandlungen


    CelulliteThis 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;
    }

    # June 7, 2012 at 1:45 pm

    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'
    });
    # June 8, 2012 at 5:39 am

    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

    # August 6, 2012 at 10:22 am

    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.

    # August 6, 2012 at 10:24 am

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

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".