user3393032 user3393032 - 6 months ago 17
HTML Question

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

Ani Ani
Answer

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