HTML Can't Change Height of Div

Issue

So I’m working on a tic tac toe game but for some reason my divs won’t change their height.

html {
  background-color:black;
  color:white;
  text-align:center;
}

.cell {
  border: 1px solid white;
  margin:1px;
  width:30%;height:30%;
}

<header>Tic Tac Toe</header>
<div id='board'>
  <div class='cell'></div>
  <div class='cell'></div>
  <div class='cell'></div>
</div>

The width of the divs is changing fine, but as for the height (which is supposed to be 30% of the screen each) are practically lines.

EDIT: This probably isn’t necessary but I feel bad, if you do help out, thank you for taking your time. 🙂

Solution

That is because you don’t have a height to the board and the 30% of almost 0 is… 0.

Add some height to the div with the id of board.

Add this to your css:

html {
  background-color:black;
  color:white;
  text-align:center;
}
#board{
 height:300px;
}
.cell {
  border: 1px solid white;
  margin:1px;
  width:30%;height:30%;
}

Answered By – Florin Pop

Answer Checked By – Terry (AngularFixing Volunteer)