So basically this is Day 3 (other days, I pretty much did nothing to complete the game) of making a game from HTML5. So I'm making a moves system right now, and I guess I'm doing well? (mainly because I'm not sure if I provided the user with too many moves...) But the thing about it is that, I'm kind of having ANOTHER styling issue.

As you can see in the image: I've CLEARLY set dimensions up for the headerDisplay class/id, but NO, it goes out of the div's dimensions and even goes on the grid. I'm also aiming for the time and moves text to be stuck right on top of the grid, similarly to how the word bank is stuck to the bottom of the grid.

I was also aiming for a button that says refresh right under the word bank, however no matter what I tried, the button would just be right the score text, which looks like this:

When I am aiming for this:

Code:

<div  id="content">
    <div  id="headerDisplay">
    </div>
    <div  id="gameArea">
    </div>
    <div  id="wordBank">
    </div>
    <div  id="bottomMenu">
    </div>
  </div>

::before,
    ::after {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .content {
      display: grid;
      grid-template-rows: repeat(3, max-content);
      margin-block: 1em;
      margin-inline: auto;
      width: 512px;
    }
    .bottomMenu {
      font-size: 24px;
      text-align: right;
    }
    .wordBank {
      border: 2.5px solid #000;
      border-radius: 5px;
      display: flex;
      font-size: 1.6em;
      min-height: 3em;
      justify-content: space-between;
      padding: 0.25em;
    }
    
    .wordBank span:nth-child(even) {
      align-self: end;
    }
    
    .gameArea {
      font-size: 0;
      justify-self: center;
      max-width: 100%;
    }
    
    .cell {
      border: 1px solid black;
      width: 50px;
      font-size: 1rem;
      height: 50px;
      display: inline-block;
    }

    .headerDisplay {
      width: 100%;
      height: 76.8px;
      text-align: right;
      font-size: 1.6em;
    }

let score = 0;
const headerDisplay = document.getElementById("headerDisplay")
const bottomMenu = document.getElementById("bottomMenu");
const wordBank = document.getElementById("wordBank")
const gameArea = document.getElementById("gameArea")
const rows = document.getElementsByClassName("gridRow");
const cells = document.getElementsByClassName("cell");
const words = [ // snippet
  "ability",
  "able",
  "about",
  "above",
  "abroad",
  "absence",
  "absent",
  "absolute",
  "accept",
  "accident",
  "accord",
  "account",
  "accuse",
  "accustom",
  "ache",
  "across",
  "act"
]
let selectedWords = [];
bottomMenu.innerHTML = "<p>Score: "   score;
bottomMenu.innerHTML  = "<button>Refresh"
while (selectedWords.length < 5) {
  const selectedWord = words[Math.floor(Math.random() * words.length)];
  if (selectedWord.length <= 9) {
    wordBank.innerHTML  = "<span>"   selectedWord   "</span>"
    selectedWords.push(selectedWord);
  }
}
let longestWord = selectedWords.reduce((a, b) => a.length < b.length ? b : a, "")
let charCount = longestWord.length
var moves = charCount * 5
headerDisplay.innerHTML  = "<p>Time: "
headerDisplay.innerHTML  = "<p>Moves: "   moves
function makeRows(rowNum) {
  for (let r = 0; r < rowNum; r  ) {
    let row = document.createElement("div");
    gameArea.appendChild(row).className = "gridRow";
  }
}

function makeColumns(cellNum) {
  for (let i = 0; i < rows.length; i  ) {
    for (let j = 0; j < cellNum; j  ) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

function defaultGrid() {
  makeRows(charCount);
  makeColumns(charCount);
}
defaultGrid();

CodePudding user response：

To fix header you need to set its height to fit content, so it will be over your grid even if you change it later:

.headerDisplay {
    width: 100%;
    height: content-fit; /* previous: 76.8px */
    text-align: right;
    font-size: 1.6em;
}

And to fix bottom menu you need to add flexbox:

.bottomMenu {
    font-size: 24px;
    text-align: right;
    display: flex; /* new */
    flex-direction: row-reverse; /* new */
    justify-content: space-between; /* new */
    align-items: center; /* new */
}

CodePudding user response：

For the button, you could try this:

button {

position: relative;
right: 400px; 
bottom: 50px;
transform: scale(2,2)   
}