Click here to Skip to main content
14,644,614 members
Rate this:
Please Sign up or sign in to vote.
See more:
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;
}
Posted
Updated 18-May-20 8:14am
v2
Comments
ZurdoDev 18-May-20 8:54am
   
I do not understand what you are saying.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

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.
   

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




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