Absolute position inside TD

Modified from http://stackoverflow.com/a/6079254/854760

by Bruno G.

HTML

<table>
            <tr>
                <td style="vertical-align:top;background-color:blue">
                    <div class="box1">
                        Relative div in td
                        <span class="box2">Absolute span</span>
                    </div>
                </td>
                <td>A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, A lot of text, </td>
            </tr>
        </table>

CSS

.box1 { position: relative }
.box2 { position: absolute; left: 10px; right:0; top: 100px }

            /* Styling */
.box1 { background: red; padding: 1em 0.5em }
.box2 { background: green; padding: .5em; }
 body  { font-family: sans-serif }