When I separate the div into its own line in the HTML/CSS code, the behavior changes significantly

I'm encountering an issue with my HTML/CSS structure:

.im-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden auto;
  top: 0;
  left: 0;
}

.im-backdrop {
  background-color: var(--darkblack);
  opacity: 80%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  outline: 0;
}

.im-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0 8px;
  box-sizing: border-box;
  text-align: center;
}

.im-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.im-wrapper .im-content {
  opacity: 100%;
  box-shadow: 0 0 8px rgb(0 0 0 / 80%);
  min-width: 50%;
  margin-right: 40px;
  margin-left: 40px;
}

.im-image-holder .im-content {
  max-width: 100%;
}

.im-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  max-width: 100%;
}

.im-figure {
  background: var(--black);
  line-height: 0;
  cursor: pointer;
}

.im-close {
  color: white;
  cursor: pointer;
  padding-right: 45px;
  right: 0;
  top: 0;
  height: 45px;
  width: 45px;
  line-height: 45px;
  position: absolute;
  text-decoration: none;
  opacity: 65%;
  font-size: 28px;
  font-weight: bold;
}

button.im-close {
  overflow: visible;
  background: 0 0;
  border: 0;
  display: block;
  outline: 0;
  padding: 0;
  box-shadow: none;
}

.im-wrapper .im-content .im-figure .im-img {
  padding: 0;
}

img.im-img {
  width: auto;
  max-width: 80%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0;
  margin: 0 auto;
}

.im-bottom-bar {
  max-height: 20%;
  background-color: var(--cyan);
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
  padding: 0 15px;
}

.im-title {
  text-align: left;
  line-height: 18px;
  word-wrap: break-word;
  color: var(--black);
}

.im-collapsed {
  padding: 0 15px;
}

.im-left-bar {
  font-size: 0.8em;
}

.im-bottom-bar h2 {
  border-bottom: 1px solid var(--black);
  font-size: 1rem;
  padding-bottom: 2px;
}

.im-bottom-bar .im-left-bar.im-collapsed .row>div {
  border-right: 1px solid var(--black);
}

.im-bottom-bar .im-left-bar.im-collapsed .row>div:last-of-type {
  border-right: none;
}

.im-bottom-bar .im-left-bar {
  padding: 10px;
}

.im-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #ccc;
  font-size: 12px;
  line-height: 18px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabb8bfee5f9e5f8">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="im-wrapper">
  <div class="im-container im-image-holder"><div class="im-content">
      <div class="im-figure">
        <button title="Close" type="button" class="im-close">×</button>
        <figure>
          <img class="im-img" src="https://media.istockphoto.com/id/185235465/photo/white-toast.jpg?s=1024x1024&w=is&k=20&c=3UrLtuMZhHW6AfLbpM-87W0pW2oQHKe7End6hfgG0g0=" style="max-height:1010px">
        </figure>
        <figcaption>
          <div class="im-bottom-bar">
            <div class="im-title">
              <div class="row">
                <div class="col-12 im-collapsed im-left-bar">
                  <div class="row">
                    <div class="col-lg-6 text-left">
                      <h2>Credits</h2>
                      <div class="mb-1">stuff by waa</div>
                    </div>
                    <div class="col-lg-6 text-left">
                      <h2>Characters</h2>
                      <div class="mb-1">:3</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="im-counter"></div>
          </div>
        </figcaption>
      </div>
    </div>
  </div>
</div>

I'm puzzled by the behavior I'm observing. When I rearrange the code by moving the 

<div class="im-content">
out of line with 
<div class="im-container im-image-holder">
, the image no longer resizes properly and shifts position. This change seems minor, but it has a significant impact on the layout. Any insights on why this happens?

htmlcssbootstrap-5

Answer №1

The dilemma of pseudo-elements causing layout disruptions

(I have transformed my previous comment into an answer as per the OP's request.)

The root of the issue lies in a certain CSS rule that employs the pseudo-element before

.im-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

The presence of the pseudo-element disrupts the layout of the content division within the container. This problem may not be immediately noticeable as the pseudo-element remains unseen. Despite having a height, it lacks width, and its impact on the layout can vary based on viewport dimensions and spacing between divisions.

<div class="im-wrapper">
  <div class="im-container im-image-holder">
      <div class="im-content">
      
       content not displayed

      </div>
  </div>
</div>

The simplest resolution would be to eliminate the pseudo-element (via CSS) since it appears to serve no practical purpose. Alternatively, one could opt to remove the inline-block attribute in order to assign some width to the element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to assigning values to Input<input> and Select <select> elements using Javascript

I am looking to automatically set values in an input or select tag based on certain conditions defined in the JavaScript code below. However, I am facing an issue where the data does not get reflected in the database upon submitting. Any suggestions or cod ...

javascripthtml

Embarking on the GSAP journey

I'm attempting my first animation using GSAP, but no matter what I try, nothing seems to be working. I've even tried using example code without success. Within my PHP file, I have the following code snippet: <head> <script src="https:/ ...

javascriptjquerycssgsap

Is there a way to eliminate a style from the final element of a list?

I have just completed a project that looks similar to this: I am wondering if there is a way to remove the line at the end of the last column? (it's within a PHP while loop) Here is the code snippet: <div style="border-bottom: 1px solid #cdc ...

cssheight

Looking for CSS properties to personalize a dropdown list in an HTML select element

After spending several days scouring the internet and trying out numerous methods, I have yet to find a satisfying way to create my own dropdown list. Using CSS, I am able to customize the text color (A), the border style and color (B) of the dropdown fie ...

htmlcssdrop-down-menu

Is there a way to navigate directly to a specific section without triggering scroll behavior? Are there any alternatives to scrollIntoView() that do not

I'm currently working on setting up a page redirection to a specific section, aiming to navigate to a particular anchor div without any scrolling behavior. However, I've encountered an issue with the #id method due to having a query string in the ...

javascriptphphtmlvue.jshttp-redirect

How to position a popup window perfectly in the center without having direct access to the popup code

Currently, I am faced with the challenge of using software that does not allow direct editing of HTML on individual pages. Instead, I have the ability to add code to the header and footer to make modifications to the content within the body of each page. ...

jqueryhtmlcss

Issue with arranging cards in a grid when utilizing v-for alongside bootstrap

Just starting out with vuejs and attempting to create a grid by looping through objects using bootstrap classes. However, I'm running into an issue where the cards are not forming a grid as expected when utilizing the col classes. Below is the code f ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

Stop the recurrence of multiple clicks by incorporating a Bootstrap modal popup confirmation

$('button[name="remove_levels"]').on('click', function (e) { var $form = $(this).closest('form'); e.preventDefault(); $('#confirm').modal({ backdrop: 'static', ...

javascriptjqueryhtmlmodal-dialogbootstrap-modal

Is there a way to incorporate an animated element within the track of my circular progress bar?

My circular progress bar features two paths, with one path increasing in length as data is received, eventually turning the entire circle red. Here is the SVG HTML code: <path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" ...

javascriptjqueryhtmlcsssvg

What could be the reason my website is not saving the user input information to the database?

Hello! I am a novice programmer attempting to create a basic registration function on my website. I have set up a simple form for users to input their information, but I am facing an issue where the user data is not being stored in my database. ...

phphtmlmysqlpostmysqli

Determine the elapsed time in seconds between two specified moments

I am trying to implement two input fields in my HTML, one for a starting point and another for an end point. The user will enter two times like this: For example: [8:15] - [14:30] alert("XXXXX seconds") I want to calculate the number of seconds between 8 ...

javascripthtmltime

How can I write the code to enable dragging the button for navigating to the next page?

<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...

javascriptjqueryhtml.net

What is the best way to hide the menu bar on a particular window using electron?

In my application, there is a menu that opens the document properties window when clicked. However, I am facing an issue where the application menu gets inherited by the document properties window itself, allowing you to open another document properties wi ...

javascripthtmlcsselectron

Struggling to format boxes or display images on your WordPress website?

When working on this website, I encountered an issue with adding links to Google+ and Facebook. Despite my efforts to style the div boxes using CSS, I was unsuccessful. I also attempted to insert images using an img tag, but the pictures did not load even ...

csswordpresshtml

Utilize AJAX to retrieve the output of a PHP randomizer

Current situation: I have a PHP file with a randomizer function and HTML that utilizes this function to display strings from a separate text document. The Function: <?php function rand_line($fileName, $maxLineLength = 4096) { $handle = @fopen($fileN ...

javascriptphpjqueryhtmlajax

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

javascripthtmlcssreactjshtml-table

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

javascriptcssreactjsmaterial-designmaterial-ui

Is it possible for JavaScript to be cached when it is located within the body tag of an HTML document?

Currently, I am exploring the topic of How to optimize HTML rendering speed, and came across the idea that scripts in the HEAD tag can be cached. I'm curious, is it possible to cache JavaScript in the BODY tag? If not, I wonder why YUI suggests placi ...

javascripthtmlcachingprogressive-enhancement

Form aligned to the right

Is there a way to align the form to the right in this code? HTML @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap'); * { font-family: "Noto Sans", sans-serif; font-weight: 500; } .no-outline { ...

htmlcssformsbootstrap-5