Utilize the display: flex property to position a div in the bottom right corner of its containing element

I'm trying to showcase a yellow div "icon" at the bottom right corner of its red container "content".

Can someone help me figure out what's incorrect in my code?

.root {
    display: inline-flex;
    background-color: red;
}

.content {
    display: flex;
    align-items: centerl;
    justify-content: centerl;
    height: 80px;
    width: 100%;
    background-color: red;
}

.icon {
    position: absolute;
    right: 0;
    bottom:0;
    background-color: yellow;
}
<div class="root">
    <div class="content">
        content
    </div>
    <div class="icon">
      icon
    </div>
</div>

htmlcssflexbox

Answer №1

To achieve a specific positioning, you can use the flex end property align-self: flex-end;

View the code snippet below:

.root {
  display: inline-flex;
  background-color: red;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 100%;
  background-color: red;
}

.icon {
   align-self: flex-end;
   background-color: yellow;
}
<div class="root">
  <div class="content">
    content
  </div>
  <div class="icon">
    icon
  </div>
</div>

Answer №2

.root {
  display: inline-flex;
  background-color: red;
  position: relative;
}

.content {
  display: flex;
  align-items: centerl;
  justify-content: centerl;
  height: 80px;
  width: 100%;
  background-color: red;
}

.icon {
  position: absolute;
  right: 0;
  bottom:0;
  background-color: yellow;
}
<div class="root">
  <div class="content">
    content
  </div>
  <div class="icon">
    icon
  </div>
</div>

include the following line in the .root element:

position: relative;

Answer №3

Upon reviewing the HTML structure provided, it seems that the .icon element is not nested within the .container element. As a result, they are not related to each other. To establish a relationship, you can modify the structure by setting the .container element with position: relative.

.root {
  display: inline-flex;
  background-color: red;
}

.content {
  display: flex;
  align-items: centerl;
  justify-content: centerl;
  height: 80px;
  width: 100%;
  background-color: red;
  position: relative;
}

.icon {
  position: absolute;
  right: 0;
  bottom:0;
  background-color: yellow;
}
<div class="root">
  <div class="content">
    content
    <div class="icon">
      icon
    </div>
  </div>
</div>

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

Enhancing your design with animated borders on hover

This unique border animation caught my eye and sparked my curiosity. I'm interested to know if it can be achieved using only HTML5/CSS for a hover effect. Have you discovered any other visually appealing hover animations worth mentioning? ...

htmlcss

When using the "Content-Disposition" header with the value "inline;filename=" + fileName, it does not necessarily guarantee that PDF files will be displayed directly

When a link is clicked, I want the PDF file to first show in a new tab as a preview before allowing users to download it. I researched and found advice suggesting that including these two headers would achieve this: Response.AddHeader("Content-Dispositio ...

javascriptc#htmlangularjsasp.net-mvc

What steps can be taken to ensure that the header elements such as the image, text, and button are

I am currently working on a website project using Bootstrap 5. For the header section of the site, I have incorporated a carousel from Bootstrap that includes images, text, and buttons. My main objective is to ensure that all elements within the carousel ...

htmlcssresponsive-designfrontendbootstrap-5

"When trying to access a jQuery ID, it is coming back as undefined even though the

I'm attempting to obtain the ID of a specific element, save it as a variable, and then utilize that ID value to interact with other elements in the same section bearing the identical ID. <div class="mainContent"> <div class="articleContent"& ...

javascriptjqueryhtml

The issue with the table inside a bootstrap modal is that it is not properly sized and does

I am facing an issue with a modal that has two columns. One of the columns contains a table which is too wide and requires horizontal scrolling. I need help to make the table fit into the column without any scrolling problems. The table should be able to s ...

htmlcssbootstrap-4bootstrap-modal

Error in clientWidth measurement providing inaccurate width

I recently adjusted the width of an image (img tag) to be 1150px * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } #background-image-myos { border: 2px solid black; border-radius: 5px; width: 1150px; } Sur ...

javascripthtmlcss

Looking to incorporate HTML5 videos into a responsive Bootstrap carousel?

I've been working on creating a carousel that includes videos. When it comes to images, everything works smoothly as they are responsive even in mobile view. However, I'm encountering an issue with videos where the width is responsive but the hei ...

javascripthtmlcsstwitter-bootstraphtml5-video

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

Creating a functionality in jQuery that allows users to dynamically add a new row by clicking a button

Hello all, I am currently facing an issue with my code where I need to call a text box (or a set of divs with input fields) multiple times by clicking a button (with the id 'add_row'). The current code works fine for the first time, but not for ...

phpjqueryhtmlajaxjquery-ui

The issue of font icons not displaying seems to be affecting all users

I have developed my own website that functions similar to fontawesome. However, after uploading it to an online server, I encountered a problem where others are unable to use my custom font icon. In order for someone to utilize the font icon from my websi ...

htmlcss

Bootstrap alert JS refuses to slide down

Here is the JavaScript code to make a blue bar slide down on click: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); ...

javascriptjqueryhtmlcsstwitter-bootstrap

Working with HTML5 Canvas to Clip Images

Is there a way to implement a tileset image in canvas like this one? I am trying to figure out how to make it so that clicking on the first tile returns 0, clicking on the tenth tile returns 9, and so on... Any suggestions on how to clip a tileset on an ...

javascripthtmlcanvas

Vue.js - Trouble with Rendering Elements

I'm facing an issue with displaying data fetched from an API using axios in Vue.js. Despite writing the code, the elements are not being rendered and don't appear in the elements console. See below for the code snippets: <div class=" ...

htmlvue.js

Using a percentage width on a <div> element with the "overflow-x: scroll" property does not seem to be functioning properly, even when encapsulated within

My code includes a div within another div, taking up 50% of the page's width: <div id="mainContainer" class="mainContainer"> <div id="scroller" class="scrolling"> <!-- items here should make the div really long --> & ...

javascripthtmlcss

ng-repeat failing to display the final two divs

I'm having trouble with the following code. The second to last div inside the ng-repeat is not being rendered at all, and the last div is getting thrown out of the ng-repeat. I can't figure out what's wrong with this code. Can anyone spot th ...

javascripthtmlangularjs

Guide on transferring control from a successful jQuery event to an HTML form

I am currently using the following jQuery code to validate user details. $.ajax({ type: "POST", url: "Login", data:'uname='+encodeURIComponent(uname)+'&'+'pass='+encodeURIComponent(pass), ...

javascriptjqueryhtml

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by brea ...

htmlimagecss

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...

javascriptjqueryhtml

Ensuring the image is properly sized to fit the screen and enabling the default zoom functionality

I am looking to achieve a specific behavior with an image, where it fits the viewport while maintaining its aspect ratio and allowing for zooming similar to how Chrome or Firefox handle local images. Here are the details of my project: The image I have is ...

javascripthtmlcssangularimage

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc