Align Left and Right floats to bottom of Parent div

Question

I have an element in an HTML page with child elements

<div id="parent">
    <div class="child01"></div>
    <div class="child01"></div>
    <div class="child02"></div>
</div>

I have an example with current css at http://jsfiddle.net/exu76qnx/

and I would like to know how to have the child divs align to the bottom of the parent div (without using the absolute position answer I've found online and I would like to keep the float attribute if possible)

I've tried using verticle-align: bottom and positioning elements with a table (which worked) however they would not work for dynamically adding more child elements to the parent div

Answer 1

This might be a case of no school like the old school

I've managed to do it with tables which I wanted to avoid (but not as much as absolute positioning)

http://jsfiddle.net/tefz80jq/

<!-- parent is now a table -->
<table id="parent" cellpadding="0" cellspacing="0" border="0">

<!-- table row handles bottom alignment -->
<tr valign="bottom">

I was hoping for a solution similar to this, being able to dynamically add elements that will fall in line with existing positioning

Answer 2

OPTION 1: You could add a wrapper around these these children which is positioned absolutely.

You can then continue to use floats inside that wrapper.

/*APPEARANCE*/

#parent {
  width: 80%;
  margin: 0 auto;
  height: 100px;
  background-color: #BBBBBB;
  position: relative;
}
.wrapper {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: lightblue;
}
.child01 {
  width: 70px;
  height: 70px;
  background-color: #888888;
}
.child02 {
  width: 50px;
  height: 30px;
  background-color: #888888;
}
/*POSITIONING*/

.child01 {
  margin-right: 20px;
  float: left;
}
.child02 {
  float: right;
}

<div id="parent">
  <div class="wrapper">
    <div class="child01"></div>
    <div class="child01"></div>
    <div class="child02"></div>
  </div>
</div>

OPTION 2: Alternative with Flexbox (still with wrapper)

/*APPEARANCE*/

#parent {
  width: 80%;
  margin: 0 auto;
  height: 100px;
  background-color: #BBBBBB;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}
.wrapper {
  overflow: hidden;
  /* quick clearfix */
  background: lightblue;
}
.child01 {
  width: 70px;
  height: 70px;
  background-color: #888888;
}
.child02 {
  width: 50px;
  height: 30px;
  background-color: #888888;
}
/*POSITIONING*/

.child01 {
  margin-right: 20px;
  float: left;
}
.child02 {
  float: right;
}

<div id="parent">
  <div class="wrapper">
    <div class="child01"></div>
    <div class="child01"></div>
    <div class="child02"></div>
  </div>
</div>

I'm still getting to grips with flexbox so it's possible this could be improved.