Grow your CSS skills. Land your dream job.

equal height columns, without specifying height….

  • # April 4, 2012 at 2:55 am

    So I have this issue which stems from wishing to use a background image in a column class with no height.

    If I have no height specified, the image is either to large to display, or as I want it centered, ends up being centered too high up the page.

    This image illustrates the issue….

    Footer column issue

    Ideally, but I can’t wrap my head around how, I would like for the height of all the columns to be the height of the largest column, which in my example above would be the column on the right. Then the shadow image would always be centered, and the space can expand if needed.

    This is the current code…

    #footer .column {
    padding-right: 25px;
    margin-right: 10px;
    float: left;
    width: 285px;
    background: green url('../img/footerShadow.png') center right no-repeat;
    }

    Any tips?

    Ta,

    # April 4, 2012 at 3:29 am

    How about using a bit of jQuery? http://jsfiddle.net/joshnh/XcVas/

    # April 4, 2012 at 5:55 am

    Hi Joshua!

    I know you’re learning jQuery so I just wanted to share that I learned this really cool method from the jQuery map() documentation. Basically it uses map and Math.max to accomplish the same thing (demo).

    // get the heights of each column in an array
    // [ 20, 20. 560 ] in this example
    var heights = $('.column').map(function(i,e) {
    return $(e).height();
    }).get();

    // set all column heights to the max height in heights
    $('.column').height( Math.max.apply(this, heights) );

    Also, Chris made a post a while back on how to make Equal Height Blocks in Rows which I later turned into a plugin.

    # April 4, 2012 at 9:19 am

    @Mottie I’ll have to pore over that as it looks pretty awesome. Thanks for taking the time to help me out with my jQuery learning Rob!

    # April 5, 2012 at 4:15 am

    @joshuanhibbert @Mottie Those examples looks nice thankyou. Guess I’ll need to learn jQuery…..

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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