Aligning blocks at the bottom of a containing block

[nomis80]

Hi,

I'm having a problem which I though should be fairly simple, but I've been hacking at it for many hours now.

I want to align blocks horizontally at the bottom of a containing block. The containing block has a fixed height while the contained block do not. Here's a mockup of what I want:



How should I modify the following code so that it renders like the above?

Code: Select all

<div style="height:50px">
    <div style="float:left">one</div>
    <div style="float:left">two</div>
</div>

Thanks!

[Rob]

you need to use:-
position:absolute; bottom:1px;

[D3mon]

...the container div will need to be set as position:relative and div#2 will need to have a left value of at least the width of div#1.