なんちゃってvalign

サンプル

$ (function () {
    $ ("div.grid.middle > div.column").addClass ("middle");
    $ ("div.grid.bottom > div.column").addClass ("bottom");
    $ ("div.grid div.column").filter (".middle, .bottom").each (function () {
        var height = 0;
        $ (this).siblings ().each (function () {
            height = Math.max (height, $ (this).height ());
        });
        var margin = Math.max (height - $ (this).height (), 0);
        $ (this).css ("margin-top", ($ (this).hasClass ("middle") ? Math.floor (margin / 2) : margin) + "px");
    });
});

div.grid {
    _height: 1%;
    *zoom: 1;
}
div.grid:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
div.grid div.column {
    float: left;
}

<div class="grid middle">
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>
<hr />
<div class="grid bottom">
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>
<hr />
<div class="grid">
    <div class="column middle" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
    <div class="column bottom" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>