How do I align an inner div with the bottom of an outer div?

Question

I need to align an inner div with the bottom of an outer div.

My code looks like this:

<div class="myOuterDiv">
    <div class="div1 floatLeft"> Variable content here </div>
    <div class="div2 floatRight"> <img class="myButton" src="" /> </div>
</div>

The content of 'div1' may vary, making the height of the outer div to vary. How can I make sure that my button (div2) always stays at the bottom of the outer div?

I prefer using CSS, but if not possible, I can use jQuery.

UPDATE

I chose to do this the jQuery way, where I bumped into some issues. It's all solved and you can find my working solution here:How can I calculate the height of an element cross-browser using jQuery?

Answer 1

Try this:

.myOuterDiv { position: relative; }
.div2 { position: absolute; bottom: 0 }

Making something position absolute will remove it from the flow; you could account for this by adding bottom padding to .myOuterDiv that is equivalent to the height of .div2