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,
.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-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.
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.