Align a DIV to the bottom of an unrelated DIV using CSS (relationship between parents and children)

Question

Is alignment of bottom B to bottom A possible if DIVs are not parent / child?

The heights of both A and B vary depending on which page is being viewed, so I do not believe that I can do this with padding / fields / independently.

Since I'm a new user here, I cannot post images, so I will illustrate the text.

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

I'm great CSS CSS, and I'm hacking Wordpress to get it to do what I want. Any help would be appreciated.

Thanks!

The page I'm working on is here:

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

Answer 1

I understand what you are trying to do. I would suggest placing the parent div around A and B corresponding to the position, and absolutely positioning the B div at the bottom of this container. Thus, he will always stick to the bottom.

I tested the following code and it looked perfect. A screenshot attached to it.

 <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

Answer 2

Of course, this is a vertical-align property for.

HTML:

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

Please note that </div><div id="b"> concerned. Since these two elements are inline-block elements, any space in the markup will create space in the presentation.

CSS

 #container > div { vertical-align: bottom; width: 100px; display: inline-block; } #a { background: red; height: 300px; } #b { background: blue; height: 100px; } 

See: http://jsfiddle.net/Wexcode/pbdHj/

Answer 3

The main strategy that comes to mind:

• wrap two in a div container
• declare 'position: relative' in the container to call the "container" property in the div (could not find the real name of this side effect)
• Place your sidebar absolutely, with "bottom: 0"