Tips for using nested flexbox with images

I am facing a straightforward use case where I have an image and a div containing text.

The current setting for the div is flex column.

My goal is to change the flex setting to row so that the text and image appear side by side.

Despite having the correct settings for the text flexbox, the image still displays above the text. Can anyone identify the issue in my code?

.promptParent {
  display: flex;
  flex-direction: row;
}

.prompt {
  position: absolute;
  width: 540px;
  height: 180px;
  left: 450px;
  top: 67px;
  font-family: Coiny;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 {
  font-size: 72px;
}

h2 {
  font-size: 36px;
  margin-bottom: 0;
  margin-top: 0;
}
<div class="promptParent">
  <div class="prompt">
    <h1>Sketch</h1>
    <h2>90% Dog</h2>
    <h2>10% Human</h2>
  </div>
  <a href="https://www.google.com">
    <img src="/" alt="Refresh Button for Prompt" />
  </a>
</div>

https://i.stack.imgur.com/lT419.png

htmlcssflexboxresponsive-design

Answer №1

In case you are utilizing a React framework, I updated className to class.

The issue arises from the absolute positioning, not related to z-index. Absolute positioning with specific position values overrides flex properties and positions elements absolutely as instructed by the browser.

If you want the elements in prompt to be centered vertically and horizontally on the page, you can achieve this easily without absolute positioning. Simply add min-height: 100vh; along with display: flex; on the body element, then center them using justify-content: center;.

After getting rid of absolute positioning and fixed height/width on prompt, you can use align-items: center; to adjust their position inline, as needed. Additionally, incorporating gap property helps in spacing them out.

Feel free to make any necessary adjustments. Check out the provided code snippet below or experiment with it on the Fiddle.

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promptParent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3em;
}

.prompt {
  font-family: Coiny;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 {
  font-size: 72px;
}

h2 {
  font-size: 36px;
  margin-bottom: 0;
  margin-top: 0;
}
<body>
  <div class="promptParent">
    <a href="https://www.google.com">
      <img src="https://dummyimage.com/100x100/000/fff" alt="Refresh Button for Prompt" />
    </a>
    <div class="prompt">
      <h1>Sketch</h1>
      <h2>90% Dog</h2>
      <h2>10% Human</h2>
    </div>
  </div>
</body>

Answer №2

Ensuring proper positioning in your layout requires setting the z-index property. For more information, visit

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

Numerous intersecting lines on display within Google Maps

Currently, I am working on displaying multiple flight routes on Google Maps. I have implemented polylines with geodesic to achieve this functionality successfully. However, a challenge arises when more than two flights intersect the same route, causing o ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

How can I calculate the width of a character in an HTML5 canvas?

When using the .fillText function with a fixed-width font, I can easily adjust the height by setting the .font property. However, is there a way to accurately determine the width of an individual character? ...

javascripthtmlcanvasfont-size

Extracting the value of an attribute from an XML element and converting it into an HTML unordered list with

Here is an example of an xml file structure: <root> <child_1 entity_id = "1" value="Game" parent_id="0"> <child_2 entity_id="2" value="Activities" parent_id="1"> <child_3 entity_id="3" value="Physical1" parent_id="2"> ...

javascripthtmlxmlxslt

Unusual marker appearing on every page utilizing ionic v1 and angularjs

For some unknown reason, a dot appears at the upper left side of each page in my webapp: https://i.stack.imgur.com/nN61t.png It seems to be an issue with the HTML code. When I run the snippet below, the dot is visible: <ion-view view-title="Send fe ...

javascripthtmlcssangularjsionic-framework

Header and footer remain unaligned

Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...

htmlcssjsp

What is the best way to delete a CSS class from a specific element in a list using React?

I need to implement a functionality in React that removes a specific CSS class from an item when clicking on that item's button, triggering the appearance of a menu. Here is my code snippet. import "./Homepage.css" import React, { useState, ...

javascriptcssreactjs

Siblings are equipped with the advanced selector feature to

I'm struggling to understand this setup I have: <div class="container"> for n = 0 to ... <a href="some url">Link n</a> endfor for each link in ".container" <div class="poptip"></div> ...

javascriptjqueryhtmlcss

What is the functionality of client-side applications?

I am new to web development and my programming background is primarily focused on algorithms and creating visualization tools using local Windows forms. I often distribute these tools via email as compiled exe files (C++ or C# win form) to my math students ...

javascripthtmlasp.netwebweb-applications

Do we actually need all of these DIVs?

Do you ever find yourself creating a div purely to house another element? Take for example, when designing a menu. You may create a div with specific styling and then place an unordered list within it. Alternatively, you could apply all the styling direc ...

csshtml

Selenium was unable to find the p tag element on the webpage

I apologize for reaching out to you all for assistance with such a basic task, but I have tried everything in my toolkit and still can't seem to figure it out. I've experimented with partial xpath, full xpath, and various CSS selectors. I am see ...

jquerycssseleniumxpath

The HTML background color is refusing to change

I've been struggling to tweak the background color of a specific page. I attempted setting the HTML as the background color, using !important, but unfortunately, it didn't yield the desired result. The same goes for trying to set the background c ...

htmlcssangularjsbackground-colorstyling

Adjust the HTML content prior to displaying it to prevent any flickering

Is there a way to run code before the page is rendered, such as updating dates or converting text to HTML, without causing flickering when reloading multiple times? How can I ensure the code runs as it's drawn instead of waiting until the end to redra ...

javascripthtml

How about this: "Unveil the beauty of dynamically loaded

var request = new Request({ method: 'get', url: 'onlinestatusoutput.html.php', onComplete:function(response) { $('ajax-content').get('tween', {property: 'opacity', duration: 'long&apos ...

javascriptajaxhtmlmootoolsfade

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

jqueryhtmlgoogle-chromemozilla

Position the outcome on the far right side

I have a question that I am revisiting with more details in hopes of finding a better solution. In the code snippet below, the output is aligned to the right of the row: <table border="1" style="width:100%"> <tr> <td align="right"> & ...

htmlcss

Adjust the translateZ value according to the dynamic height of the element

A unique rotating cube effect has been developed using 3D css transformations. To achieve this, the following transform is applied to a child element: transform: translateY(-50%) translateZ(-75px) rotateX(90deg) ; In addition, the parent element contain ...

csscss-transforms

"Implementing master page and CSS styles on a child page: A step-by-step

Currently, I have a master page that is successfully being applied to all of my pages. However, it seems to be encountering an issue when trying to locate the CSS file address for pages within child folders. The folder structure looks like this: <scri ...

asp.netcssmaster-pages

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

javascripthtmlcsstailwind-cssdisplay

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

htmlcssbootstrap-5

Retrieve the HTML value of an element in Vue.js by clicking on its adjacent element

Hey there, I'm currently working on a simple notes app and I've hit a roadblock with one particular feature. In my project, I have a card element with a delete button as a child. What I need to achieve is to check if the value of the .card-title ...

javascriptjqueryhtmlvue.jsvuejs2