Forums

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

Home Forums CSS Equal Heights for Alignment – jQuery maybe?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #25219
    John Harris
    Member

    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]

    #59800
    TheDoc
    Member

    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!

    #59802
    Frodo64
    Member

    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.

    #59927
    EamonnMac
    Member

    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…

    #59942
    TheDoc
    Member

    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]

    #59945
    burnzedy
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.