CSS positioning inside a div

Question

I am using a div with 2 elements inside, and I want my first element to be vertically aligned at the top and the second element at the bottom of the div. Div is the right side of my page and is equal to the height of my main content.

#right { float:right; width: 19%; background:#FF3300; margin-left:2px; padding-bottom: 100%; margin-bottom: -100%; } #right .top { display:block; background-color:#CCCCCC; } #right .bottom { bottom:0px; display:block; background-color:#FFCCFF; height:60px; } 

HTML:

 <div id="right"> <span class="top">Top element</span> <span class="bottom"><img src="images/logo_footer1.gif" width="57" height="57" align="left" class="img">&nbsp;<img src="images/logo_footer2.gif" width="57" height="57" align="right" class="img"></span> </div> 

I want the right div to be like this: alt text http://christianruado.comuf.com/element.png

Answer 1

If you specify position: relative for #right and then position: absolute for the two inner elements, you can use the top / left / bottom / right attributes to achieve the desired effect.

Answer 2

Do #right {position:relative}

Do #right .top {position:absolute, top:0}

Do #right .bottom {position:absolute, bottom:0}

Answer 3

Try it.

  #right { position:relative; <-- add this float:right; width: 19%; background:#FF3300; margin-left:2px; padding-bottom: 100%; margin-bottom: -100%; } } #right .top { position:absolute; <-- add this top: 0px; <-- and this display:block; background-color:#CCCCCC; } #right .bottom { position:absolute: <-- add this. bottom:0px; display:block; background-color:#FFCCFF; height:60px; } 

Adding position:relative; to the parent element and position:absolute; using top and bottom will show your gaps that they are designed to fit perfectly inside your parent and make them stick to the top and bottom of your case.