Question

i have a table as below. The div content after the table overlaps on the table instead of to be on the new line

<table border="0" style="width:680px;position:relative !important;">
    <tr>
        <td class="row1" style="background:red">1</td>
        <td class="row2" style="background:green">2</td>
    </tr>
</table>
<div style="position:relative !important;">22</div>

and this is the css

   .row1 {
        width:405px;
        position:absolute;
    }
    .row2 {
        width:273px;
        position:absolute;
        left:390px;
    }

can some body please help me to resolve it? The div contents should be on a new line below the table contents. Thanks in advance

Answer 1

This is because your table doesn’t have a height. The height collapses because you have positioned the table cells absolutely. Simple fix would be to add a height (if always known), but that’s not very robust at all.

If you post up what you are wanting to do (mainly why you are positioning absolutely) we can help help further 🙂