Tic-Tac-Toe board not showing up on webpage

Question

For some reason my css and html is not showing up on the webpage. It only shows the h1 title of Tic-Tac-Toe. I've written the code out to match what my homework list but I am missing something and I've started over several times and cannot seem to get what I am missing. maybe I'm reading the homework wrong?

h1 {
  text-align: center;
}

.top {
  padding: 3em;
  float: left;
  height: 100px;
  width: 100px;
  border-bottom: 1px black solid;
}

.middle {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

.center {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
}

.bottom {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
}

.row {
  clear: both;
  width: 302px;
  text-align: center;
}

HTML:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="app.css">

<div id=b oard>
  <h1>TicTacToe</h1>
  <div class="row 1">
    <div class="top left"></div>
    <div class="top middle"></div>
    <div class="top right"></div>
  </div>
  <div class="row 2">
    <div class="middle left"></div>
    <div class=".center"></div>
    <div class="middle right"></div>
  </div>
  <div class="row 3">
    <div class="bottom left"></div>
    <div class="bottom middle"></div>
    <div class="bottom right"></div>
  </div>
</div>

</html>

you should do the effort to reduce your content and keep the most relevant part ... no one want to waste 20min reading your homework ... and you have a typo `
` no need the dot — Temani Afif, Oct 05 '18 at 21:12

Guilherme Santos · Answer 1 · 2018-10-24T18:18:52.740

In your code the first thing I noticed is that you're trying to display items where each one is wider than its container, so the three columns on each row overflows the row total width, so they stack on each other.

Try to use box-sizing: border-box You can read about it here

The important thing is:

It seems that this homework is somewhat old, as it gives tips to build the board using css in a manner we don't use anymore.

The float property is really not the best way to arrange the elements of the page. Since that property was created a long time ago, when the websites were very different, basically texts and images, it was intended mainly to arrange images inside blocks of text. So it produces some really weird results sometimes, if you don't have total knowledge of how it works. see this for details

You could try to use flexbox, once you study and understands the basics of how it works, your life would be a lot easier! A complete guide to flexbox

With flexbox you could do something like:

div {
  box-sizing: border-box;
}
.row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
  height: 100px;
  background-color: grey;
}
.col {
  flex: 1;
  margin: 10px;
  background-color: blue;
}

 <div id= board>
      <h1>TicTacToe</h1>
      <div class="row">
          <div class= "col"></div>
          <div class= "col"></div>
          <div class= "col"></div>
      </div>
      <div class="row">
          <div class= "col"></div>
          <div class= "col"></div>
          <div class= "col"></div>
      </div>
      <div class="row">
          <div class= "col"></div>
          <div class= "col"></div>
          <div class= "col"></div>
      </div>
  </div>

I used margins and background colors just to make it easier to see the boxes, you can change it as you need.

Other way you could resolve this is by using CSS Grid layout

score 0 · Answer 2 · answered Oct 05 '18 at 21:22

The essential mistake you made is that the different borders produce different heights and widths for those elements, since the 1px borders are added to the height and width, and therefore some floating elements will go to the next row since there's 1px too little vertical space to make it fit in the same row, messing up the intended layout. (Some elements are 102 high, some 101px)

But if you add box-sizing: border-box, the border width is included in the height and width, so each of your element will really be 100x100px, including the borders.

That's done in my snippet below. The borders obviously are still not correct, but fixing that is up to you now...

* {
box-sizing: border-box;
}
h1 {
  text-align: center;
}

.top {
  padding: 3em;
  float: left;
  height: 100px;
  width: 100px;
  border-bottom: 1px black solid;
}

.middle {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

.center {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
}

.bottom {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
}

.row {
  clear: both;
  width: 302px;
  text-align: center;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="app.css">

<div id=b oard>
  <h1>TicTacToe</h1>
  <div class="row 1">
    <div class="top left"></div>
    <div class="top middle"></div>
    <div class="top right"></div>
  </div>
  <div class="row 2">
    <div class="middle left"></div>
    <div class="center"></div>
    <div class="middle right"></div>
  </div>
  <div class="row 3">
    <div class="bottom left"></div>
    <div class="bottom middle"></div>
    <div class="bottom right"></div>
  </div>
</div>

</html>

Tic-Tac-Toe board not showing up on webpage

2 Answers2