How can i protect html element overlaping?

Question

Two Div, overlapping one by another. if i add some padding on main-wrap-inner div then it is not overlapping. But padding is not fruitful for all browser.

I have this html :

<div class="main-wrap">
  <div class="main-wrap-inner">
      <nav class="navbar aog-navbar"></nav>
  </div>
  <div id="fullpage" class="container charity-content">
     <section></section>
     <section></section>
  </div>
</div>

And the CSS are :

    .main-wrap {
        background: #ffffff none repeat scroll 0 0;
        clear: both;
        margin: 0;
        min-height: 100%;
        overflow: visible;
        padding: 0;
        position: relative;
    }
    .main-wrap-inner {
        clear: both;
        height: 100%;
        min-height: 86px;
        padding: 0;
        position: relative;
        width: 100%;
    }
    .main-wrap-inner {
        height: auto;
        min-height: inherit;
      }
  .aog-navbar {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #fff;
        border-color: -moz-use-text-color -moz-use-text-color #ddd;
        border-image: none;
        border-style: none none solid;
        border-width: 0 0 1px;
        min-height: 100px;
        z-index: 99;
    }
    .navbar {
            margin-bottom: 20px;
            position: fixed;
    }

.charity-content, .charity-content .container {
    max-width: 1220px;
    width: 100%;
}
.charity-content {
    padding-left: 0;
    padding-right: 0;
}

Now problem is the div with fullpage going under the div with main-wrap-inner. How can i protect this overlapping ?

Answer 1

well this happens because the .navbar has position:fixed and it stays depending on the document not of it's container, even though you set position:relative on .main-wrap.

position:fixed gets the element out of it's container. so it overlaps everything.

i saw that you set a min-height:100px; on .aog-navbar so you should set a margin-top of minimum 100px on the .charity-content or #fullpage div

see snippet below. let me know if it helps

to read more about position see here : CSS position

.main-wrap {
        background: #ffffff none repeat scroll 0 0;
        clear: both;
        margin: 0;
        min-height: 100%;
        overflow: visible;
        padding: 0;
        position: relative;
    }
    .main-wrap-inner {
        clear: both;
        height: 100%;
        min-height: 86px;
        padding: 0;
        position: relative;
        width: 100%;
    }
    .main-wrap-inner {
        height: auto;
        min-height: inherit;
      }
  .aog-navbar {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #fff;
        border-color: -moz-use-text-color -moz-use-text-color #ddd;
        border-image: none;
        border-style: none none solid;
        border-width: 0 0 1px;
        min-height: 100px;
        z-index: 99;
    }
    .navbar {
            margin-bottom: 20px;
            position: fixed;
    }

.charity-content, .charity-content .container {
    max-width: 1220px;
    width: 100%;
}
.charity-content {
    padding-left: 0;
    padding-right: 0;
    margin-top:100px;
}

<div class="main-wrap">
  <div class="main-wrap-inner">
      <nav class="navbar aog-navbar">navbar here</nav>
  </div>
  <div id="fullpage" class="container charity-content">
     <section>section1</section>
     <section>section2</section>
  </div>
</div>