How do I put this div under another div?

Question

#statDiv {
  position: relative;
  left: 0;
  height: 10%;
  width: 100%:
}


}
#gameCount {
  text-align: center;
}
#player1Score {
  text-align: left;
}
#score1Div {
  float: left;
  width: 33%;
  height: 10%;
  background-color: blue;
}
#countDiv {
  float: left;
  width: 33%;
  height: 10%;
  background-color: red;
}
#score2Div {
  float: left;
  width: 33%;
  height: 10%;
  background-color: green;
}
#player1Div {
  float: left;
  width: 50%;
  height: 100%;
  background-color: blue;
}
#player2Div {
  float: left;
  width: 50%;
  height: 100%;
  background-color: green;
}
#arenaDiv {
  position: relative;
}

<!DOCTYPE html>
<html>

<head>
  <title>practice</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="practice" />
  <meta name="keywords" content="practice" />
  <meta name="author" content=", 11/05/2019" />
</head>

<body>
  <div id="statDiv">
    <div id="score1Div">
      <p id="player1Score">1</p>
    </div>
    <div id="countDiv">
      <p id="gameCount">H</p>
    </div>
    <div id="score2Div">
      <p id="player1Score">2</p>
    </div>
  </div>
  <div id="arenaDiv">
    <div id="player1Div">
      <p id="gameCount">H</p>
    </div>
    <div id="player2Div">
      <p id="player1Score">2</p>
    </div>
  </div>
</body>

</html>

I tried using float in the first time but it didn't work so now I tried using positions for the divs and I don't know what the problem is. My goal is to put to put the second main div(arenaDiv)under the first main div(statDiv) but it doesn't work because it just like combines all of them or basically the two divs overlap each other. What postion should I use for each of the divs in order to put the other one under the first one?

First, you have one too many `}`, one after first CSS rule, and, in the same rule, a typo where the `width: 100%:` ends with a color `:` (should be semicolon `;`, if any). — Asons, May 11 '19 at 07:58
Beside that you haven't cleared the floats in those 2 main `div`, which you can do with e.g. `overflow: hidden` (or any other [_clearfix_](https://stackoverflow.com/questions/8554043/what-is-a-clearfix)), they already do stack vertical. You need to clarify better what it is you mean with it is not working. — Asons, May 11 '19 at 08:01
Could you add a draw or sketch of what you are trying to achieve? Do you need to use floats? Why not flexbox? — Francisco Hanna, May 11 '19 at 08:49

score -1 · Answer 1 · answered May 11 '19 at 09:21

-1

Try:

#arenaDiv {
  position: relative;
  top : 1% 

}

Also try position: absolute; for first <div>

answered May 11 '19 at 09:21

Amal K

4,359
2
22
44

1

Code dumps and the text "Try..." is not a good way to answer. Also explain what you did and how/why it works. And FYI, your answer doesn't solve what is asked, which is _"How do I put this div under another div?"_, and the reason is, it works already. – Asons May 11 '19 at 10:01

How do I put this div under another div?

1 Answers1