Question

I have everything set up on a jsFiddle page, please take a look at it here: http://jsfiddle.net/ryanjay/bq5eE/

My problem is, when you open the DIV (column), it aligns all the other closed divs to the bottom of it. Can someone help me by adding some jquery code to make it so when you open each DIV(column) the other divs stay aligned to the top. Perhaps it has something to do with margin-top, I am unsure.

I am also using a slider that wraps around the columns, so floating them isn’t an option.. they just wrap to the next line. They must have a display of inline-block.

Thanks

Here is my HTML:

<div class="column">
    <div class="open">
        open
    </div>
    <div class="close">close</div>
    <div class="contentInner">
        <div class="ProjectContainer">
            Content goes here. 
        </div>
    </div>
</div>

<div class="column">
    <div class="open">
        open
    </div>
    <div class="close">close</div>
    <div class="contentInner">
        <div class="ProjectContainer">
            Content goes here. 
        </div>
    </div>
</div>

Here is my Jquery:

$(document).ready(function() {
    //Page Load
    $('.column').css({
        width: '200px',
        height: '200px'
    });
    // Open
    $('.open').click(function() {
        $(this).parent().animate({
            width: '400px',
            height: '520px',
        }, 500);
        $(this).hide();
        $(this).siblings('.close').show();
        $(this).siblings('.contentInner').fadeIn('slow', function() {
            $(this).show();
        });
    });

    // Close
    $('.close').click(function() {
        $(this).parent().animate({
            width: '200px',
            height: '200px'
        }, 500);
        $(this).siblings('.contentInner').fadeOut('100', function() {
            $(this).hide();
        });
        $(this).hide();
        $(this).siblings('.open').fadeIn('150', function() {
            $(this).show();
        });
    });

});

And my CSS:

.column {
    position: relative;
    width: 200px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    height: 520px;
    margin: 30px 30px 0px 0px;
    display: inline-block;
    text-align: left;
}

.open {
    position: absolute;
    margin: 0px 0px 0px 0px;
    cursor: pointer;
}

.close {
    position: absolute;
    margin: 0px 0px 0px 368px;
    cursor: pointer;
    display: none;
}

.contentInner {
    position: absolute;
    width: 380px;
    height: 400px;
    font: 12px Helvetica, Arial, Sans-Serif;
    font-weight: 200;
    margin: 20px 0px 0px 10px;
    display: none;
    white-space: normal;
}

You can always see it on jsFiddle here: http://jsfiddle.net/ryanjay/bq5eE/

Thanks!

Answer 1

http://jsfiddle.net/bq5eE/7/

Just add a vertical-align style to the .content CSS block:

vertical-align: top;

Alternately, if you need to do it with jQuery, do this:

$(".content").css("vertical-align", "top");