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: ```

Variable content here

``` 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?

Accepted Answer

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

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

Solution

Problem