Why div are overlapping

user_14123615 0
Viewed 60

I try to put many div's like this. But something is wrong, all them are overlapped.

I tried to search internet but couldn't find solution.

Any tips to fix it?

Thank you.

#myProgress {
  width: 100%;
  background-color: #ddd;
max-width: 500px;
  position: absolute;
  overflow: hidden;
}

#gamename {
 float: left;
  height: 30px;
  background-color: #4CAF50;
  text-align: left;
  line-height: 30px;
  color: white;
  overflow: hidden
}
#gamefps {
 float: right;
  width: 100px;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  overflow: hidden
}
<div id="myProgress">
  <div id="gamename" style="width:30%">PUBG</div>
  <div id="gamefps">85 FPS</div>
</div>
<br>
<div id="myProgress">
  <div id="gamename" style="width:40%">VALORANT</div>
  <div id="gamefps">95 FPS</div>
</div>
<div id="myProgress">
  <div id="gamename" style="width:50%;">FORTNITE</div>
  <div id="gamefps">110 FPS</div>
</div>
<div id="myProgress">
  <div id="gamename" style="width:60%; ">APEX LEGENT</div>
  <div id="gamefps">130 FPS</div>
</div>

overlap css html
3 Answers

You're using position: absolute in your css and also remove <br> from your html

#myProgress {
  width: 100%;
  background-color: #ddd;
  max-width: 500px;
  position: relative; // Here change absolute with relative
  overflow: hidden;
}

And in your code, if you've multiple similar elements, its better to use a class than an id.

.myProgress {
  width: 100%;
  background-color: #ddd;
max-width: 500px;
  position: relative;
  overflow: hidden;
}

.gamename {
 float: left;
  height: 30px;
  background-color: #4CAF50;
  text-align: left;
  line-height: 30px;
  color: white;
  overflow: hidden
}
.gamefps {
 float: right;
  width: 100px;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  overflow: hidden
}
<div class="myProgress">
  <div class="gamename" style="width:30%">PUBG</div>
  <div class="gamefps">85 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:40%">VALORANT</div>
  <div class="gamefps">95 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:50%;">FORTNITE</div>
  <div class="gamefps">110 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:60%; ">APEX LEGENT</div>
  <div class="gamefps">130 FPS</div>
</div>

user_68105390

You should remove postion: absolute and br tag in your html code as

#myProgress {
  width: 100%;
  background-color: #ddd;
  max-width: 500px;
  overflow: hidden;
}

#gamename {
 float: left;
  height: 30px;
  background-color: #4CAF50;
  text-align: left;
  line-height: 30px;
  color: white;
  overflow: hidden
}
#gamefps {
 float: right;
  width: 100px;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  overflow: hidden
}
<div id="myProgress">
  <div id="gamename" style="width:30%">PUBG</div>
  <div id="gamefps">85 FPS</div>
</div>
<div id="myProgress">
  <div id="gamename" style="width:40%">VALORANT</div>
  <div id="gamefps">95 FPS</div>
</div>
<div id="myProgress">
  <div id="gamename" style="width:50%;">FORTNITE</div>
  <div id="gamefps">110 FPS</div>
</div>
<div id="myProgress">
  <div id="gamename" style="width:60%; ">APEX LEGENT</div>
  <div id="gamefps">130 FPS</div>
</div>

user_49645690

First you can't use multiple ids with same name in the same document. You must change ids to classes

And position:absolute breaks the workflow of the page you must remove that as well.

.myProgress {
  width: 100%;
  background-color: #ddd;
  max-width: 500px;
  overflow: hidden;
}

.gamename {
  float: left;
  height: 30px;
  background-color: #4CAF50;
  text-align: left;
  line-height: 30px;
  color: white;
  overflow: hidden
}
.gamefps {
  float: right;
  width: 100px;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  overflow: hidden
}
<div class="myProgress">
  <div class="gamename" style="width:30%">PUBG</div>
  <div class="gamefps">85 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:40%">VALORANT</div>
  <div class="gamefps">95 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:50%;">FORTNITE</div>
  <div class="gamefps">110 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:60%; ">APEX LEGENT</div>
  <div class="gamefps">130 FPS</div>
</div>

user_140553900
Related