Click here to Skip to main content
14,601,062 members

Why my divs are overlapping main section as well as side nav bar

Shabihul Qadri asked:

Open original thread
here`s the jsfiddle link of my code :https://jsfiddle.net/meemtech/4e5h3mvy/

<pre><pre><!Doctype html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Irish+Grover&display=swap" rel="stylesheet">

    <style>

    </style>
  </head>

  <body>
  <!--side nav starts here-->
    <div class="nav-main">
<div class="row">
Home 
</div>
<div class="row">
FAQ 
</div>
<div class="row">
Best Games 
</div>
<div class="row">
New Games 
</div>
<div class="row">
WebGL 
</div>
<div class="row">
MAtch 3 
</div>
<div class="row">
Racing 
</div>
<div class="row">
Summer Games 
</div>
<div class="row">
Soccer
</div>
<div class="row">
Girls 
</div>
<div class="row">
Sports 
</div>
<div class="row">
Multiplayer 
</div>
<div class="row">
Puzzle 
</div>
<div class="row">
Bubble Shooter 
</div>
<div class="row">
Cards 
</div>
<div class="row">
Bubble Shooter 
</div>
<div class="row">
Cards 
</div>
<div class="row">
Quiz 
</div>
<div class="row">
Skill 
</div>
<div class="row">
Action 
</div>
<div class="row">
Time & Srategy
</div>
<div class="row">
Arcade 
</div>
<div class="row">
Mahjong 
</div>
<div class="row">
Educational 
</div>
<div class="row">
Board Games 
</div>
<div class="row">
Platform 
</div>
<div class="row">
Casino 
</div>
</div>
    <!--side nav ends-->
    
    <!-- central section starts -->
    <div class="relative">
      <button class=pleft>
        Best
      </button>
      <button class=pright>
        More >>
      </button>
      <div class='main container cf-display-container'>

        <div class='s1 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%; position:absolute">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadowr">Exclusive</p>
        </div>

        <div class='s2 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadow" style="width: 30px;">New</p>
        </div>

        <div class='s3 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s4 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s5 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s6 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s7 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s8 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

      </div>
    </div>
    <!--central 1 section ends here-->
    
     <!-- central section starts -->
    <div class="relative">
      <button class=pleft>
        Best
      </button>
      <button class=pright>
        More >>
      </button>
      <div class='main cf-display-container'>

        <div class='s1 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%; position:absolute">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadowr">Exclusive</p>
        </div>

        <div class='s2 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadow" style="width: 30px;">New</p>
        </div>

        <div class='s3 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s4 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s5 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s6 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s7 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s8 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

      </div>
    </div>
    <!--central 2 section ends here-->
    
  </body>

</html>
/pre>


<pre>body {
  background-color: DarkOrchid;
}

* {
  font-family: Irish Grover, Balsamiq Sans, cursive;
}

.relative {
  position: relative;
  display: block;
  max-width: 400px;
  margin: auto;

}

.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

.pleft {
  display: inline-block;
  margin-left: 10px;
  font-size: 30px;
  background-color: transparent;
  border: none;
  color: white;
}

.pright {
  position: absolute;
  display: inline-block;
  right: 10px;
  font-size: 30px;
  background-color: transparent;
  border: none;
  color: white;
}

.main {
  position: absolute;
  height: 400px;
  width: 98%;
  background-color: white;
  margin: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.cf-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.play {
  position: absolute;

  bottom: 40%;
  padding: 10px 10px;
  border-radius: 15px;
  color: red;
  background-color: white;

  font-size: 20px;
  text-align: center;
  display: none;

}

.play:hover {
  background-color: red;
  color: white;
}

.play:hover .cf-spin {
  animation: cf-spin 2s infinite linear;
}

@keyframes cf-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

.dhover {
  position: absolute;
  display: block;
  bottom: 0px;
  width: 65px;
  color: white;
  background-color: OrangeRed;
  padding: 4px;
  text-align: center;
  border-right: 3px solid white;
}


.s1 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 49%;
  width: 65%;
  margin: 2px;
  overflow: hidden;
}

.s1:hover {
  opacity: 0.6;
}

.s1:hover .play {
  display: block;

}

.s1:hover .dhover {
  display: none;
}


.s2 {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s2:hover {
  opacity: 0.6;
}

.s2:hover .play {
  display: block;

}

.s2:hover .dhover {
  display: none;
}


.s3 {
  position: absolute;
  top: 25%;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s3:hover {
  opacity: 0.6;
}

.s3:hover .play {
  display: block;

}

.s3:hover .dhover {
  display: none;
}


.s4 {
  position: absolute;
  top: 50%;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s4:hover {
  opacity: 0.6;
}

.s4:hover .play {
  display: block;

}

.s4:hover .dhover {
  display: none;
}


.s5 {
  position: absolute;
  top: 50%;
  left: 33%;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s5:hover {
  opacity: 0.6;
}

.s5:hover .play {
  display: block;

}

.s5:hover .dhover {
  display: none;
}


.s6 {
  position: absolute;
  top: 50%;
  left: 0px;
  height: 24%;
  width: 32.5%;
  margin: 2px;
  overflow: hidden;

}

.s6:hover .play {
  display: block;

}

.s6:hover .dhover {
  display: none;
}

.s6:hover {
  opacity: 0.6;
}


.s7 {
  position: absolute;
  bottom: 0px;
  height: 24.3%;
  width: 65%;
  margin: 2px;
  overflow: hidden;
}

.s7:hover {
  opacity: 0.6;
}

.s7:hover .play {
  display: block;

}

.s7:hover .dhover {
  display: none;
}


.s8 {
  position: absolute;
  bottom: 0;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;

}

.s8:hover {
  opacity: 0.6;
}

.s8:hover .play {
  display: block;

}

.s8:hover .dhover {
  display: none;
}


img {
  display: block;
  position: absolute;
  margin: 2px;
  border: 2px solid Cyan;
}

/* Side nav style */

.nav-main {
  position: relative;
  display: block;
  max-width: 170px;
  height: 400px;
  background-color: black;
  float: left;
}

.row {
  display: block;
  background-color: DarkOrchid;
  height: 25px;
  width: 170px;
  border: 1px solid gold;
  margin-top: 1px;
  color: white;
  font-family: Irish Grover, Balsamiq Sans, Cursive;

}

.row:hover {
  background-color: gold;
  color: black;
}

i {
  float: right;
}


What I have tried:

<pre>.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}
Tags: CSS, HTML5

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the The Code Project Open License (CPOL).




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100