The following problems occur because the height of my container is not pre-determined - it can vary, and is unknown. I have experimented using query to sort out positioning, but there are two reasons I do not wish to use jquery: this layout would be repeated multiple times on a single page, so I am concerned about, one, page loading times, and two, unique ids (if I reference a class or ID, it would occur multiple times on one page).
How can I align two elements side by side? I have a column layout. The column on the left requiring items to be aligned to the top, and the column on the right requiring items to be aligned to the bottom.
As per my example, here: http://jsfiddle.net/uBn5Z/
In my example above, I am trying to remove the space that appears below the content in the left column. I want the 'signature' item to be horizontally aligned with the bottom of the content in the left column. The gap should be removed. I thought this might be because of widths being specified not equalling the total width when padding and margins are considered, therefore the item being 'pushed down'. Although I have looked into that possibility, it could still be true.
In another example, you can see I have managed to align the 'signature' to the bottom, however there is overlap between the content: http://jsfiddle.net/uBn5Z/6/ (I have tried using 'clear: both', but it didn't work)
The examples above are what I have been able to achieve. Here is an mock-up of what I want to achieve: