在表div下关闭div [关闭]

Question

I've got a strange problem. I coded two pages that are a header (menu) and a slider. The header, in order to be centered, is displayed as a table, and the Slider as a block.

The problem i've got is that when I include with php my two divs (That are on separated files), the block div (slider) appear in front of the table div (menu) as you can see :

http://test.brunotarhan.fr/home(2).php

Code:

http://codepen.io/anon/pen/qOwNdz

<div id="bg">

<div id="menu">
<div class="table">
<ul>
  <li class="navitem"><a href="#">Portfolio</a>
  <ul>
      <li><a href="#">Logotypes</a></li>
      <li><a href="#">Mise en pages</a></li>
      <li><a href="#">Photographie</a></li>
      <li><a href="#">Autre...</a></li>
    </ul>
  </li>
  <li class="navitem"><a href="#">Projets</a>
  </li>
  <li id="logo"><a href="http://test.brunotarhan.fr/"><img src="http://test.brunotarhan.fr/img2015/LogoSite.png" width="268" height="190"></a></li>
  <li class="navitem"><a href="#">A propos</a></li>
  <li class="navitem"><a href="#">Contact</a></li>
</ul>
</div>
</div> <br>
<link rel="stylesheet" href="style2015.css" />

<div class="table" id="slider">
<ul>
      <li class="fg"></li>
      <li><a href="#"></a></li>
      <li class="fd"><a href="#"></a></li>

</ul>
</div></div>

Answer 1

The #menu div has a height of 30px. The table inside it has a bigger height, so it overflows out of the div, but that doesn't change the vertical position of the #slider div below. So the #slider div overlaps most of the table.

Solution: don't give #menu a height of 30px.