CSS: Bug when display list horizontally

Question

I am successfully display a list horizontally:

<div id="container">
        <div id="header">                
                <h:form>
                    <ul>
                        <li><a href="#">Peter</a></li>
                        <li>
                            <p:commandLink value="Profile" ajax="false"
                                           actionListener="#{myBean.myProfile}"/>
                        </li>      
                    </ul>                      
                </h:form>
        </div>
</div>
    <!--
    <div id="MainContainerPanel">
        <div id="LeftPanel" style="border: 2px solid gray; width: 190px; padding: 5px;">

        </div>
        <div id="CenterPanel">

        </div>
        <div id="RightPanel">

        </div>
        <div id="adsPanel"/>
    </div>
    -->

However, if I uncomment the <div id="MainContainerPanel">, then I got a weird bug. Peter is a hyperlink, but I have to move my mouse to the very top of Peter to be able to click on it. Please click this link to be able to see what I am talking about. I able to recreate the bug through this website http://jsfiddle.net/Tuvzj/21/

here is my CSS

#header{
    height: 30px;
    width: 100%;
    padding: 0 10px;
    vertical-align: middle;
    display: table-cell;
    color: gray; font-weight: bold;                
}
#container{
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    border-bottom: 2px solid gray;
}
#header ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

#header li{
    display: inline;
    padding-right: 20px;
}
#MainContainerPanel
{
    position:absolute;  
    top:10px;
    left: 10px;
    right:10px;
    bottom:10px;

    font-size: 12px/*{fsDefault}*/;
}
#LeftPanel
{
    position:absolute;    
    left:0px;
    top:60px;
    height: 100%;        
}
#CenterPanel
{
    position:absolute;
    left:240px;
    width: 500px;
    top:60px;
    height: 100%;
}
#RightPanel
{
    position:absolute;
    left:780px;
    top:60px;
    height: 100%;
    width:230px;
    padding: 10px;
    border: 2px solid gray;
}

Answer 1

The problem is that #mainContainerPanel is covering the names menu. If you add margin-top: 2em (or any value that forces the #mainContainerPanel down the page enough to remove the overlap) the issue is resolved.