Prevent Growing Div Underneath from Pushing Up Div Above

Question

I'm having an issue with a <div> pushing up another <div> from underneath.

Basically, the <div> above is a <canvas> of defined dimensions, and underneath is a <div> that contains a <p> element. After a event is fired, I'm using innerHTML to change the contents of the <p> element. Because of this, the content of the <p> element goes from one line to two. When that happens, however, the <canvas> is pushed up the page.

I've tried using different position CSS values, but because I'm using flexbox it means that the two divs stack up.

Here's the CSS and HTML:

.container {
  padding: 10px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.player {
  margin-bottom: 20px;
}

.textContainer {
  font-size: 24px;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="main.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="player">
        <canvas id="canvas"></canvas>
      </div>
      <div class="textContainer">
        <p id="moveText">Moves: 0</p>
      </div>
    </div>
  </body>
</html>

Thanks in advance!

The canvas moves up because the container has `justify-content: center`. This means that when the paragraph expands in height, the canvas has to move up in order for the line to remain centered. It's not clear what you want to happen. You want the canvas fixed on the screen? — Michael Benjamin, Dec 23 '16 at 03:05
@Michael_B Oh right, I forgot about that. Ideally, I would like the canvas fixed in its initial position. Thanks for that gotcha! — , Dec 23 '16 at 03:07
Then centering may not be your best option. Use a `margin-top` on the canvas to position it where you want. https://jsfiddle.net/cytsf8cd/2/ — Michael Benjamin, Dec 23 '16 at 03:11
@Michael_B Fair enough. What is the best way to only centre the canvas then? — , Dec 23 '16 at 03:15
@The_Grits if you mean horizontal center: `canvas { margin: auto }` — Technohacker, Dec 23 '16 at 03:16
and this may also be useful: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Dec 23 '16 at 03:22
@Michael_B Thanks for all the help, I ended up solving it by applying the `display:flex` only on the player div, and it worked out great. — , Dec 23 '16 at 03:30

Prevent Growing Div Underneath from Pushing Up Div Above

0 Answers0