Question

I am trying to make the div at the bottom float to the right and appear at the bottom of it’s parent. This markup is working for all my browsers except when I put IE9 in Browser Mode: IE9 and Document Mode IE7 standards (which is the one I need to use.)

For some reason with these settings the grey border around test in div extends all the way to the left of the parent div when I need it to just go around the text like it does in FF or Chrome. By the way, I hate IE7 for this crap. The markup is totaly logical and should work but IE7 just has to be a jerk.

 <div style="width: 200px;">
    <div style=" height: 400px; border: 1px solid #000000;">
    </div>
    <div style="border: 1px solid #c0c0c0; position: relative; height:15px; bottom: 19px; left: -2px; float:right;">
        <div style="height: 15px; float: right;">
            Text in div</div>
    </div>
</div>

Answer 1

You could switch to using position: relative/position: absolute:

http://jsfiddle.net/5fdcV/

<div style="width: 200px; position: relative">
    <div style=" height: 400px; border: 1px solid #000000;">
    </div>
    <div style="border: 1px solid #c0c0c0; position: absolute; height:15px; bottom: 2px; right: 2px;">
        <div style="height: 15px;">
            Text in div</div>
    </div>
</div>