CODEWITHSUNDEEP
csshtml
user3393032
user3393032

Reputation: 71

Div overlapping issue

I have divs as shown in the FIDDLE , the div content gets overlapped with the header resulting in hiding of the content data ie "Sample data 1".

<div id="header">
<div id="firstdiv">
    <table border="0px" width="100%" style="background-color:rgb(2, 44, 72)">
                        <tr>
                            <td id="test1" style="width:90%;" align="left">test

                            </td>
                        </tr>
                    </table>
</div>

</div>
<div id="content">
<table border="0">
    <tr>
        <td>Sample data 1
        </td>
    </tr>
    <tr>
        <td>Sample data 2
        </td>
    </tr>
    <tr>
        <td>Sample data 3
        </td>
    </tr>
    <tr>
        <td>Sample data 4
        </td>
    </tr>
</table>
</div>

//CSS #header { position:relative; } #firstdiv { float:left;width:100%; position:absolute; color:white; }

Thanks

Upvotes: 2

Views: 650

Answers (2)

Ani
Ani

Reputation: 4523

Add some padding to header: http://jsfiddle.net/k8Vut/3/

   #header
   {
       padding-top: 25px;
   }

Since your firstdiv is absolute it'll start from top: 0 position and hence overwrites the relative positioned header. So if you add some padding, it'll move the header a little below and make space for firstdiv

Upvotes: 1

Shomz
Shomz

Reputation: 37701

Remove the absolute positioning from the #firstdiv element. The left float also seems unnecessary.

See here: http://jsfiddle.net/k8Vut/2/

Upvotes: 2

Related Questions