Align DIV to bottom of unrelated DIV with CSS (no parent/child relationship)

Question

Is aligning the bottom of B with the bottom of A possible if the DIVs do not have a parent/child relationship?

The heights of both A and B change depending on which page is being viewed, so I don't believe I can do it with padding/margins/whatever.

Since I'm a new user here I can't post images, so I'll illustrate with text.

What I have:             What I want:
[   nav bar   ]          [   nav bar   ]
--------- -----          ---------
|       | | B |          |       |
|   A   | -----          |   A   |
|       |                |       | -----
|       |                |       | | B |
---------                --------- -----
     ----------               ----------
     | content|               | content|

I'm a big time CSS newb and I'm hacking around with Wordpress to get it to do what I want. Any help would be appreciated.

Thanks!

The page I am working on is here:

http://rachelhappen.com/the-charlie-baker-sneaker/

Answer 1

I understand what you're trying to do. What I would suggest is putting a parent div around A and B that's relative on position, and absolutely positioning the B div to the bottom of that container. This way, it will always stick to the bottom.

I've tested the following code and it looked perfect. Screenshot attached of it rendered.

<style type="text/css">

* { margin:0; padding:0; }
.container { position:relative; width:600px; height:400px; }
.container .a { background:red; position:absolute; height:400px; width:400px; left:0; }
.container .b { background:green; position:absolute; height:200px; width:200px; right:0; bottom:0; }
.cl { clear:both; }

</style>

<div class="container">
     <div class="a">a</div>
     <div class="b">b</div>
</div>

http://i.stack.imgur.com/6unHw.png