Question

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>

Answer 1

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>