Search code examples
htmlcsscss-floatvertical-alignment

Align Left and Right floats to bottom of Parent div

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

Solution

  • 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