mockup

Above is really a mockup of the items I wish to accomplish.

I've two different rows of divs that should be aligned to the foot of the row, where I've got a strong gray rule at the end of every div. These gray rules should align flat.

The greatest problem is the fact that, as this is a WordPress theme, each div must have the ability to expand and contract up and down in line with the quantity of content. This means that if .description around the left will get taller, .page-title and .sidebar need to sit in be sure that the gray rules are aligned. Jetski from me by using any fixed levels, that we could determine a method with.

My first solution was using a mix of absolute and relative positioning: use two container divs, .row-1 and .row-2, both with position: relative, and add position: absolute; bottom: 0;. This does not appear to operate, though, without setting a set height to every .row- div, whether I personally use floats or left :/right: to put the person divs.

The only real other solution I'm able to think about is applying JavaScript to obtain the height from the highest div and adjust margins properly, but I am unwilling to use JavaScript for style. It is possible to better solution that I am missing?

Why not try and employ CSS framework they're easily easy to customize and they're very simple to use. try 960.gs or blueprintcss.org. you will find a number of other versions available of 960 framework can be obtained.

Personally, i suggest 960 since it is easier than the others.

<div class="grid_7 prefix_1">
    <div class="grid_2 alpha">
        ...
    </div>
    <div class="grid_3">
        ...
    </div>
    <div class="grid_2 omega">
        ...
    </div>
</div>
<div class="grid_3 suffix_1">
    ...
</div>

This can be a 4 column with fixed width.