Grow your CSS skills. Land your dream job.

Equal Heights for Alignment – jQuery maybe?

  • # June 24, 2009 at 11:05 pm

    Link to Example: http://johnharrisdesign.com/test/

    What I’m Trying to Do:
    I am trying to find a way to align text and images vertically inside a div, so that they match the alignment of their sibling in the same row (images below to alleviate confusion). Also, if the height of text changes in one div the sibling div changes accordingly so that all text and images are still aligned. IMPORTANT! -The rows need to behave independently. That way each row can grow to fit the needs of its own child divs.

    What I’ve Done:
    I’ve been doing some research into jQuery of how I could dynamically set equal heights for the siblings, and when one changes the other changes accordingly. However, I haven’t found anything I understand fully.

    Here is What I Found:
    http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
    http://stackoverflow.com/questions/632022/how-do-i-use-jquery-to-get-the-height-of-a-dynamically-created-child-element-with
    I am currently trying to figure out how to use this.

    Code:
    Clay Knife
    All purpose knife.
    $2.49
    ST1212
    Add to Cart

    Super Slicer, with comfort Handles
    Super slicer, with comfort handles.
    $12.99
    ST1215
    Add to Cart

    Etch n’ Pearl
    This Set of 3 metal skewers can
    be used for a variety of unique applications.
    $7.99
    ST1545
    Add to Cart

    Polymer Clay Oven
    This handy counter top oven is
    perfect for warming/baking polymer clays or any craft product.
    $59.95
    12505P
    Add to Cart

    Code:
    #product-container {
    }
    .product-container-title {
    border-bottom:1px solid #40bfa2;
    padding:0 0 3px 0;
    margin:0 0 25px -15px;
    }
    .product-row {
    margin:0 0 0 -40px;
    }
    .product {
    width:280px;
    border:1px solid #d8d8d8;
    background-color:#f7f7f7;
    float:left;
    margin:0 0 25px 25px;
    padding:10px;
    }
    .product-image {
    width:75px;
    height:220px;
    text-align:center;
    float:left;
    margin:10px 0 0 0;
    }
    .product-title {
    color:#359c84;
    font-weight:bold;
    font-size:16px;
    float:left;
    width:180px;
    margin:0 0 5px 20px;
    }
    .product-description {
    float:left;
    width:180px;
    margin:0 0 5px 20px;
    padding:0 0 20px 0;
    }
    .product-price {
    font-weight:bold;
    font-size:16px;
    width:180px;
    float:left;
    margin:0 0 5px 20px;
    padding:0 0 10px 0;
    }
    .product-id {
    float:left;
    width:180px;
    font-size:12px;
    margin:0 0 5px 20px;
    padding:0 0 20px 0;
    }
    .add-to-cart {
    float:right;
    }
    .add-to-cart a img {
    border:none;
    }

    This what this code currently looks like in Firefox 3.
    [img]http://johnharrisdesign.com/test/images/actual.png[/img]

    This is what I want it to look like. (without the border and lines obviously :))
    red border = .product-row
    teal line = alignment
    [img]http://johnharrisdesign.com/test/images/mockup.png[/img]

    # June 27, 2009 at 2:15 am

    Wow, you put tons of effort into this. I haven’t gone through it quite yet, but I’ve bookmarked it to go through before the weekend’s out!

    # June 27, 2009 at 6:41 am

    Hmm. I can’t say how to position everything. But if you don’t find the answer just try to position the "Add to cart" button to the bottom right corner (position:absolute; bottom:5px; right:5px;). I believe it will look nice too.

    # June 30, 2009 at 11:17 am

    Probably speaking out of turn here :oops: but couldn’t you just give a height value to each of the nested divs? I would rely, of course, on the content not ever extending beyond those heights…

    # June 30, 2009 at 12:47 pm

    Because the title of the product can be more than one line, you’re almost never going to be able to line everything up properly. But perhaps you’ve been thinking about it all wrong. Check out how I’ve organized things here in the bottom two (I also think it looks a lot more pleasing to the eye):

    [attachment=0]better.jpg[/attachment]

    # June 30, 2009 at 1:10 pm

    I went to your website and it seems that you’ve done it with jquery. I think it’s the only way to do exactly what your looking for (although you could have done something a little different in pure css).
    The only thing with the jquery solution, would be to put an height (or min-height) to your product class so that if a user don’t have javascript it would be still pleasant to look at (even if it’s not exactly what you wanted).

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

You must be logged in to reply to this topic.

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