Member Avatar for sweexee

Hi, please can someone help me to solve divs' ovelapping issue in my code? My navigation overlapping logo area when I resize my browser window to a smaller. Other divs stay proportionally in their places except navigation . I tried different options but I can't find a mistake. I would really appreaciate a help. This is this part css and html:

* {
    margin: 0%;
    padding: 0%;
}
body {
    font-family: "PT Sans Caption";
    font-size: 1em;
}
li {
    list-style: none;

}
ul {
    display: block;
}
}
header, nav, section , footer{
    display: block;
    clear: left;
    float: left;
    width: 100%;
}

#container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
}
header {
    height: 10em;
    position: relative;
}
nav {
    width: 75%;
    position: relative;
    left: 16%;
    clear: none;
}

.logo {
    width: 13%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-top: 2%;
    position: fixed;
    z-index: 1000;
    float: left;
}

.top-nav {
    padding-top: 2%;
    clear: none;
    position: relative;
}
.top-nav-li {
    float: left;
    margin-right: 2%;
}

and here HTML:

<body onload="MM_preloadImages('images/nav_about_col.png','images/nav_illustration_col.png','images/nav_graphic_col.png','images/nav_contact_col.png','images/social_fb_col.png','images/social_pin_col.png','images/social_blog_col.png','images/web_cap250_col.jpg')">
<div id="container">
  <header>
    <div class="logo">
      <p><img src="images/web_logo.png" width="120" height="124" alt="fox box design" /></p>
</div>
    <nav class="top-nav" role="navigation">
    <li class="top-nav-li">
    <a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/nav_about_col.png',1)"><img src="images/nav_about1.png" alt="a link to about section" name="Image2" width="67" height="70" border="0" id="Image2" /></a></li>
    <li class="top-nav-li"><a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/nav_illustration_col.png',1)"><img src="images/nav_illutr1.png" alt="a link to illustration category" name="Image3" width="67" height="70" border="0" id="Image3" /></a></li>
    <li class="top-nav-li"><a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/nav_graphic_col.png',1)"><img src="images/nav_graphic1.png" alt="a link to graphic design category" name="Image5" width="67" height="70" border="0" id="Image5" /></a>
    <li class="top-nav-li"><a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/nav_contact_col.png',1)"><img src="images/nav_contact1.png" alt="a link to contact section" name="Image6" width="67" height="70" border="0" id="Image6" /></a>
    </nav>
  </header>
  • 4 Contributors
  • 3 Replies
  • 2K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for Bensirpent07

This is a question of curiosity, are you doing the resizing to find out if the page is responsive?

Member Avatar for Alicera Nz

change to:

display:inline;
Member Avatar for gentlemedia

It's because you're logo has a fixed positioning, so it's taking out of the normal document flow and has therefore no effect to other elements of that page.

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.