CODEWITHSUNDEEP
javascripthtmlcsscss-float
htmllearner
htmllearner

Reputation: 61

Div content overlapping with table content

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

Upvotes: 0

Views: 5300

Answers (5)

Nav
Nav

Reputation: 1

I found the easiest approach used in my project is to use a style to adding padding at bottom so that the even the overlap is not visible to the user

.padding_for_footer250 {
    padding-bottom: 250px;  
}

Upvotes: 0

b01
b01

Reputation: 4384

*Update: Really don't know what your trying to achieve, but here is a way to make it happen.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            /* Wrapper container for the table and thd div below it. */
            .abs-div {
                position: absolute;
            }
            /* First td inside the table. */
            .row1 {
                float: left;
                margin-right: -15px;
                width: 405px
            }
            /* Second td within the table, but it's on the same row as the first td, but called row-2 for some reason. */
            .row2 {
                float: left;
                width: 273px
            }
            /* Div below table. */
            .div-below-table {
                position: relative !important;
            }
        </style>

    </head>
    <body>
        <div class="abs-div">
            <table border="0" style="width:680px;position:relative !important;">
                <tr>
                    <td class="row1" style="background:red">1</td>
                    <!-- Should this be on it's own row -->
                    <td class="row2" style="background:green">2</td>
                </tr>
            </table>
            <div class="div-below-table">22</div>
        </div>
    </body>
</html>

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

This happens because you set position:absolute in the CSS: this means that the normal flow is disrupted and that element overlaps.If you remove that, you don't have the problem:

fiddle http://jsfiddle.net/BHLhS/1/

Upvotes: 0

Josh Johnson
Josh Johnson

Reputation: 11127

Your two <td>s are position: absolute which will not hold the <table> open. You will need to

  • assign height to your table
  • remove the absolute on the tds
  • or add enough margin-top to your div that it will sit below your table.

Given the above information, the second option is probably what you want.

Upvotes: 0

Stuart Burrows
Stuart Burrows

Reputation: 10814

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 :)

Upvotes: 1

Related Questions