Click here to Skip to main content
15,885,244 members
Search within:


Why my divs are overlapping main section as well as side nav bar
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
CSS
HTML5
here`s the jsfiddle link of my code :https://jsfiddle.net/meemtech/4e5h3mvy/

HTML
<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">
Best Games ^__i class="fa fa-star" style="font-size: 20px"__^</i__^
</div>
<div class="row">
New Games ^__i class="fa fa-plus-circle" style="font-size: 20px"__^
</div>
<div class="row">
WebGL ^__i class="fa fa-cogs" style="font-size: 20px"__^
</div>
<div class="row">
MAtch 3 ^__i class="fa fa-link" style="font-size: 20px"__^
</div>
<div class="row">
Racing ^__i class="fa fa-car" style="font-size: 20px"__^
</div>
<div class="row">
Summer Games ^__i class="fa fas fa-sun" style="font-size: 20px"__^
</div>
<div class="row">
Soccer^__i class="fas fa-futbol" style="font-size: 20px"__^
</div>
<div class="row">
Girls ^__i class="fa fa-female" style="font-size: 20px"__^
</div>
<div class="row">
Sports ^__i class="fas fa-table-tennis" style="font-size: 20px"__^
</div>
<div class="row">
Multiplayer ^__i class="fas fa-users" style="font-size: 20px"__^
</div>
<div class="row">
Puzzle ^__i class="fas fa-puzzle-piece" style="font-size: 20px"__^
</div>
<div class="row">
Bubble Shooter ^__i class="fas fa-circle" style="font-size: 20px"__^
</div>
<div class="row">
Cards ^__i class="fa fa-th-large" style="font-size: 20px"__^
</div>
<div class="row">
Bubble Shooter ^__i class="fas fa-circle" style="font-size: 20px"__^
</div>
<div class="row">
Cards ^__i class="fa fa-th-large" style="font-size: 20px"__^
</div>
<div class="row">
Quiz ^__i class="fa fa-question-circle" style="font-size: 20px"__^
</div>
<div class="row">
Skill ^__i class="fa fa-bullseye" style="font-size: 20px"__^
</div>
<div class="row">
Action ^__i class="fa fa-rocket" style="font-size: 20px"__^
</div>
<div class="row">
Time & Srategy^__i class="fa fa-clock" style="font-size: 20px"__^
</div>
<div class="row">
Arcade ^__i class="fa fa-gamepad" style="font-size: 20px"__^
</div>
<div class="row">
Mahjong ^__i class="fas fa-yen-sign" style="font-size: 20px"__^
</div>
<div class="row">
Educational ^__i class="fa fa-graduation-cap" style="font-size: 20px"__^
</div>
<div class="row">
Board Games ^__i class="fas fa-chess-board" style="font-size: 20px"__^
</div>
<div class="row">
Platform ^__i class="fa fa-cubes" style="font-size: 20px"__^
</div>
<div class="row">
Casino ^__i class="fa fa-money-bill-alt" style="font-size: 20px"__^
</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"__^</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 ^__i class="fa fa-soccer-ball-o cf-spin"></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 ^__i class="fa fa-soccer-ball-o cf-spin"></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 ^__i class="fa fa-soccer-ball-o cf-spin"></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 ^__i class="fa fa-soccer-ball-o cf-spin"></button></a>
        </div>

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

</html>
/pre>


CSS
<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:

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

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

.container:after {
    clear: both;
}
Posted
Updated 18-May-20 8:14am
v2
Add a Solution
Comments
ZurdoDev 18-May-20 8:54am    
I do not understand what you are saying.

1 solution

Consider your styling - whenever you use padding you are adding to the defined width of your 'box'.

This can be cured using an additional style box-sizing: border-box; so that it stays withing the bounds of your defined width and height instead of extending them.
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Why are my divs overlapping?
Why is my nav link not working when I want to go to the main page of the drop down menu?
Menu nav bar doesn't show
Divs overlapping jquery.
how to use nav bar as fixed , when div tags are fixed ?
Navigation lists do not show when side bar opens
Main content is overlapping on footer section PDF document iTextSharp
Nav-bar tab when click display div card with image inside using bootstrap
Nav bar menu drop down bootstrap
Div overlapping and collision position

Advertise
Privacy
Cookies
Terms of Use
Last Updated 18 May 2020
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900