The div elements appear perfectly without any text, but as soon as I add text within the boxes, it alters their appearance

Question

The div elements appear perfectly without any text, but as soon as I add text within the boxes, it alters their appearance

After inserting an image and some text, I encountered a strange issue with my code. Specifically, when adding text to the box element, it did not display as expected. I am perplexed by this behavior and unsure of the root cause.

I suspect that the problem lies in the .divver class within my code. Despite incorporating the full grid layout and proper positioning for the <div> elements, the desired outcome was not achieved.

Could the solution involve adjusting padding or margins? Perhaps varying the width of each box might resolve the issue. Any guidance on how to address this anomaly would be greatly appreciated.

Your assistance is invaluable,

Ring Games

html css

Answer 1

Answer №1

display: inline-block typically aligns elements based on their baseline.

When the elements are empty, this baseline is at the bottom of the element itself.

However, once you add text, the baseline shifts to that of the text. This results in the text's bottom being aligned with the other elements' bottoms.

If this layout isn't working for you, consider using display: grid;, display: flex;, or even column-count: 3;. If you're unable to switch, adding vertical-align: top; might solve the issue.

Answer 2

display: inline-block typically aligns elements based on their baseline.

When the elements are empty, this baseline is at the bottom of the element itself.

However, once you add text, the baseline shifts to that of the text. This results in the text's bottom being aligned with the other elements' bottoms.

If this layout isn't working for you, consider using display: grid;, display: flex;, or even column-count: 3;. If you're unable to switch, adding vertical-align: top; might solve the issue.

Answer 3

Answer №2

To enhance your design, consider utilizing absolute positioning in the CSS code snippet provided below:

      .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;</answer2>
    </div></answer2>
<exanswer2><div class="answer accepted" i="61770886" l="4.0" c="1589351090" a="Sm9obg==" ai="11111119">
<p>Consider adjusting your positioning to be absolute with the following CSS example:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>      .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;</answer2>
<exanswer2><div class="answer accepted" i="61770886" l="4.0" c="1589351090" a="Sm9obg==" ai="11111119">
<p>Try changing the position to absolute by referring to this method:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>      .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>

Answer 4

To enhance your design, consider utilizing absolute positioning in the CSS code snippet provided below:

      .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;</answer2>
    </div></answer2>
<exanswer2><div class="answer accepted" i="61770886" l="4.0" c="1589351090" a="Sm9obg==" ai="11111119">
<p>Consider adjusting your positioning to be absolute with the following CSS example:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>      .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;</answer2>
<exanswer2><div class="answer accepted" i="61770886" l="4.0" c="1589351090" a="Sm9obg==" ai="11111119">
<p>Try changing the position to absolute by referring to this method:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>      .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>

The div elements appear perfectly without any text, but as soon as I add text within the boxes, it alters their appearance

Answer №1

Answer №2

Similar questions

What is the best way to apply fill to SVG using Tailwind CSS?

How to position text in the center of an image and ensure it is responsive?

What is the best way to conceal the bottom portion of an image?

What is the solution for correcting the caret position in the Notification box?

Steps to center an HTML canvas on the screen

Submitting the form does not result in the textbox being cleared

Steps to access the file path of a swf document stored in a MYSQL database and display it on a web page

Preventing Paste Function in Electron Windows

What causes the cancel button to add spaces and create a line break in the textarea field?

Unable to utilize the standard Bootstrap color scheme within Sass

Implementing a Custom CSS Theme in JavaFX

Place a picture within a specified View

Aligning pictures in a vertical arrangement across various rows

Employing jQuery Mobile Cache Manifest with PHP

Creating a two-column grid layout using Bootstrap 4 is a simple and efficient process. Let's see how

Vue.js transition-group does not apply the *-move class

Having trouble with the nth-child CSS property in Bootstrap?

Tips for increasing the spacing in information on a Python-based website

Apply a uniform style to a selection of <a> tags using CSS

The functionality of the page becomes disrupted when multiple timers are used after the setInterval function is executed in