The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS equal height columns, without specifying height….

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #37481

    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?



    How about using a bit of jQuery?


    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();

    // 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.


    @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!


    @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.