Without text these div elements are fine but when i put text in the boxes it changes the box

Question

So I have this:

Then I add text:

.front {
  background: #e0e0e0;
  width: 100%;
  height: 200px;
  border: 5px solid black;
}

@keyframes animateonload {
  0% {
    top: 0;
    left: 200px;
    background: #80ed9d;
  }
  25% {
    top: 200px;
    left: 200px;
    background: #9f80ed;
  }
  50% {
    top: -101px;
    left: -900px;
    background: #eda380;
  }
  75% {
    top: 900px;
    left: 200px;
    background: #3e6b66;
  }
  100% {
    top: 450px;
    left: 100px;
    background: #ccfa8c;
  }
}

body {
  animation-name: animateonload;
  animation-duration: 5s;
  animation-iteration-count: 1;
  position: relative;
  width: 100%;
  height: auto;
}

.divver3 {
  width: 33%;
  height: 600px;
  background: #faa68c;
  font-size: 20px;
  display: inline-block;
  grid-column: 3;
  grid-row: 1;
}

.divver2 {
  width: 33%;
  height: 600px;
  background: #faa68c;
  font-size: 20px;
  display: inline-block;
  grid-column: 2;
  grid-row: 1;
}

.divver1 {
  width: 33%;
  height: 600px;
  background: #faa68c;
  font-size: 20px;
  display: inline-block;
  grid-column: 1;
  grid-row: 1;
}

.div {
  width: 100%;
  height: auto;
}

.divver1 h1 {
  text-align: center;
  margin: 0;
}

<div class="div">
  <div class="divver1">
    <h1> Price option 1 </h1>
  </div>
  <div class="divver2">
  </div>
  <div class="divver3">
  </div>
</div>
</div>

So why does my thing do this when I add text to the box? I have no answer, and how can this do this?

Is this just a flaw in my code in the .divver?

The code contains the full grid layout, and correct <div> positioning so why hasn't this worked?

Is it that I need padding/margins? Or does the width need to vary each box? Please help me.

Thank you,

Ring Games

score 1 · Answer 1 · answered May 13 '20 at 09:21

display: inline-block will, by default, vertically align elements according to their baseline.

When they're empty, the baseline is just the bottom of the element.

But when you add some text, the baseline is the baseline of that text. Notice how the bottom of the text is now aligned to the bottom of the other elements.

In this case you may be better off with display: grid;, display: flex; or maybe even column-count: 3; to achieve your layout, but if you're stuck with what you've got then adding vertical-align: top; should do the trick.

score 0 · Accepted Answer · answered May 13 '20 at 09:24

Try making your position absolute like this:

      .front {
        background: #e0e0e0;
        width: 100%;
        height: 200px;
        border: 5px solid black;
      }
      @keyframes animateonload {
        0% {top: 0; left: 200px; background: #80ed9d;}
        25% {top: 200px; left: 200px; background: #9f80ed;}
        50% {top: -101px; left: -900px; background: #eda380;}
        75% {top: 900px; left: 200px; background: #3e6b66;}
        100% {top: 450px; left: 100px; background: #ccfa8c;}
      }
      body {
        animation-name: animateonload;
        animation-duration: 5s;
        animation-iteration-count: 1;
        position: relative;
        width: 100%;
        height: auto;
      }
      .divver3 {
        width: 33%;
        height: 600px;
        background: #faa68c;
        font-size: 20px;
        display: inline-block;
        grid-column: 3;
        grid-row: 1;
      }
      .divver2 {
        width: 33%;
        height: 600px;
        background: #faa68c;
        font-size: 20px;
        display: inline-block;
        grid-column: 2;
        grid-row: 1;

      }
      .divver1 {

          width: 33%;
          height: 600px;
          background: #faa68c;
          font-size: 20px;
          display: inline-block;
          grid-column: 1;
          grid-row: 1;
          position: absolute;

      }
      .div {
        width: 100%;
        height: auto;
      }
      .divver1 h1 {
        text-align: center;
        margin: 0;
      }

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Ring Games - Official Site</title>
  </head>
  <body>

    <div class="div">
      <div class="divver1">
<h1>this is some text</h1>
      </div>
      <div class="divver2">
      </div>
      <div class="divver3">
      </div>
    </div>
  </body>
</html>

wasn't sure what the other divs would be filled with, but you could also set them all the `position: relative;` if they all will be filled with text. check here: https://jsfiddle.net/y2bcvrw6/ — John, May 13 '20 at 09:42
@John Thank you very much. Can I possibly send you bounty? You helped with a lot of things, thank you — RingGamesCompany, May 13 '20 at 09:48
Just to note, my answer was pretty situational, if it worked for you that's great! I do think Niet the dark absol had a better answer. Here's his answer I put together into a jsfiddle for you to see. https://jsfiddle.net/y2bcvrw6/1/ — John, May 13 '20 at 10:07

Without text these div elements are fine but when i put text in the boxes it changes the box

2 Answers2