Q:

align divs to the bottom of their container

I figured this would be simple, I need to align both of the inside divs (green and blue) to the bottom of their container (red). I'm hoping to not use absolute positioning and i need it to be ie6,7,8 ff chrome safari etc compatible.
<div style="border:1px solid red;">
    <div style="border:1px solid green; width:20px; height:20px; float:left;"></div>
    <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div>
    <div style="clear:both;"></div>
</div>

i've tried using vertical-align but can't find a simple solution.
thanks for the help, p.
EDIT here's my attempt at abs pos solution:
<div style="border:1px solid red; position:relative;">
    <div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div>
    <div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div>
    <div style="clear:both;"></div>
</div>

A:

Why can't you use absolute positioning?  Vertical-align does not work (except for tables).  Make your container's position: relative.  Then absolutely position the internal divs using bottom: 0;  Should work like a charm.
EDIT By zoidberg (i will update the answer instead)
<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;">
   <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div>
   <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div>
</div>

A:

The modern way to do this is with flexbox, adding align-items: flex-end; on the container.
With this content:
<div class="Container">
  <div>one</div>
  <div>two</div>
</div>

Use this style:
.Container {
  display: flex;
  align-items: flex-end;
}

https://codepen.io/rds/pen/gGMBbg

A:

I don't like absolute positioning, either, because there is almost always some collateral damage, i.e. unintended side effects. Especially when you are working with a responsive design. 
There seems to be an alternative - the sandbag technique. By inserting a "helper" element, either in the markup of via CSS, we can push elements down to the bottom of the container. See http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932 for examples.

