When using flexgrid, be aware that adjacent divs on the same row may shift position when applying floats

Struggling with aligning the divs in a row when floating one of them? Here's a snippet to illustrate the issue:

.flex-grid {
  display: flex;
  justify-content:space-between;
}
.flex-grid .rcorners1 {
    border-radius: 25px;
    background: green;
    padding: 10px; 
    width: 21.5%;
    height: 145px;    
    padding: 16px;
    margin: .50em 0;
    z-index:0;
    position:relative;
    overflow: hidden;
    overflow-x: hidden;
}
.flex-grid .rcorners2 {
    border-radius: 25px;
    background: green;
    padding: 10px; 
    width: 28%;
    height: 200px;    
    top:180px;
    padding: 16px;
    margin: .50em 0;
    z-index:1;
    border-style:solid;
    border-width:5px;  
    border-color:#a6a6a6;
    position:absolute;
    overflow: hidden;
    overflow-x: hidden;
}
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners2">Sample Selected</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>

When a div is floated, the alignment of other divs on the row gets disrupted as shown in the third row with "Sample Selected". The remaining divs do not align properly causing a gap. Any suggestions on how to address this alignment issue?

Thank you!

htmlcssflexbox

Answer №1

By setting an element with position: absolute, you essentially remove it from the normal document flow. This means that it no longer takes up space within its container and other elements are not aware of its presence.

This is why your third row is being adjusted when one of the four elements ("Sample Selected") is absolutely positioned, causing the remaining siblings to readjust to fill in the empty space.

An alternative approach would be to use position: relative, which keeps the elements in the document flow without disrupting their positioning.

.flex-grid {
  display: flex;
  justify-content: space-between;
}

.flex-grid .rcorners1 {
  border-radius: 25px;
  background: green;
  padding: 10px;
  width: 21.5%;
  height: 145px;
  padding: 16px;
  margin: .50em 0;
  z-index: 0;
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
}

.flex-grid .rcorners2 {
  border-radius: 25px;
  background: green;
  padding: 10px;
  width: 28%;
  height: 200px;
  top: -250px; /* ADJUSTED */
  right: 250px; /* NEW */
  padding: 16px;
  margin: .50em 0;
  z-index: 1;
  border-style: solid;
  border-width: 5px;
  border-color: #a6a6a6;
  position: relative; /* ADJUSTED */
  overflow: hidden;
  overflow-x: hidden;
  z-index: 1;
}
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners2">Sample Selected</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>

https://jsfiddle.net/pLuye06k/

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

Iterating through elements within a Div will retrieve the initial element exclusively

Is there a way to loop through all elements within the MainDiv Div in order to retrieve their values? Currently, I am only able to retrieve the value of the first element. <div id="MainDiv"> <input type="text" id="MyText"value="Text1" /> ...

javascriptjqueryhtmlcss

How to incorporate Django syntax into CSS styling

Imagine a scenario where a Django site is equipped with numerous stylesheets. CSS and JS files are located in the static/ directory within an app's folder or in the global site directory. Various color themes are employed across different pages, neces ...

pythondjangocss

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

javascripthtmlcssbootstrap-5

Creating a tool to display mouse coordinates as a pointer on an HTML5 canvas

I'm struggling with mouse coordinates while working on canvas in HTML5. My approach involves using JavaScript for drawing on the canvas. Below is my current code to track the mouse pointer within the canvas: $('#canvasID').mousedown(functi ...

javascripthtmlcanvasdrawing

Align the checkbox input in the center of a flexbox container

I am in the process of creating a side menu with filters, and I need to design a row that includes an input checkbox along with some accompanying text. However, I am facing an issue where the checkbox does not center properly within the flex container when ...

csscheckboxbootstrap-4flexbox

Exploring MaterialUI withStyles to customize disabled switches with a CSS override

As I work on my project using React and MaterialUI, I've encountered a problem with customizing inputs. Despite trying various selectors, I can't seem to change the black color of this particular input. It would be helpful to have a clearer way o ...

cssreactjsmaterial-uimaterial-designreact-with-styles

Hover Link Overlay [CSS / HTML] - An Alternative Style for Link Interaction

I'm having trouble making an image clickable within a hover effect overlay that displays text and a link. I attempted to turn the overlay into a link, but it wasn't successful. http://jsfiddle.net/cno63gny/ Please disregard the placeholder text ...

htmlcssimagehoveroverlay

JavaScript toggle display function not functioning properly when clicked

I've been attempting to create a drop-down list using HTML and JavaScript, but for some inexplicable reason, it's just not functioning as expected despite scouring through countless tutorials on YouTube. Below is the snippet of code that I'm ...

javascripthtml

What could be the reason for the unexpected invisibility of the 4px margin on a static div?

I have a straightforward situation where I am using a fixed positioning <div> that spans the entire width with 100% width. It is designed to have a margin of 4px on all sides. However, for some reason, the right side margin is not visible. Can someon ...

htmlcsspositionmargin

leveraging the unique MySQL id displayed within the onclick/checkbox identifier

I am currently working on a website that displays database content and enables users to click on the content to view more information related to that specific id. I also want to include a checkbox next to each piece of content that will allow me to delete ...

phphtmlmysqlcheckboxonclick

Discover the method for invoking a Javascript function within a Leaflet popup using HTML

Upon clicking on a marker on the leaflet map, I aim to trigger a popup box that contains five elements: Title Description Image Button (Next Image) Button (Previous Image) To achieve this, I attempted to include a custom popup for each feature ...

javascripthtmlvue.jsleaflet

Issues with div misalignment during jQuery animation

I have successfully created an animation where a child div inside a parent div moves up by -60px when the mouse enters the parent div, and returns to its original position when the mouse leaves. However, I am facing an issue where if the mouse moves direct ...

jqueryhtmlcss

Simulating a mobile device screen size using an embedded iframe

Imagine this scenario: What if instead of adjusting the browser window size to showcase a responsive web design, we could load the site into an IFRAME with the dimensions of a mobile screen. Could this concept actually work? Picture having an IFRAME like ...

javascripthtmlcss

Divider displayed between images in Internet Explorer 8

On my website, I have arranged four images in a square using the code below: <div id="tempo_main"> <div id="tempo_content"> <div style="text-align: center;z-index: 3;position: absolute;right:350px; left:350px; t ...

javascripthtmlcssinternet-explorer-8

Quantities with decimal points and units can be either negative or positive

I need a specialized input field that only accepts negative or positive values with decimals, followed by predefined units stored in an array. Examples of accepted values include: var inputValue = "150px"; <---- This could be anything (from the input) ...

javascripthtmlarraysvalidationvue.js

Using PHP and JQuery to disable a button after the letter "U" is typed

I am looking for a way to disable the button when the term "U" (defined as Unable) appears. How can I achieve this? Below is the button in question: <input type="submit" class="form-control btn-warning" name="search" value="Search Data"></input& ...

javascriptphpjqueryhtmlforms

Fetch information from MySQL, create a new row for each data entry

Currently, I am working on a project for my school that involves retrieving student works from a database. For the homepage of my project, I have set up 10 divs to hold the data returned from a query. The reason I preset these divs is because I only need ...

javascriptphpjqueryhtmlmysql

What attribute should I utilize to ensure the image always takes priority over text when using @media queries?

resolution My goal is to have the image appear on top of the text when resizing the window, but maintain the appearance shown in the attached image when using a larger resolution. Below is the CSS code I am currently using: .section4 { text-align: cen ...

htmlcss

Display a division in C# MVC 4 when a boolean value is true by using @Html.DropDownList

I have multiple divs stacked on top of each other, and I want another div to appear when a certain value is selected. I'm familiar with using JavaScript for this task, but how can I achieve it using Razor? Below is a snippet of my code: <div id=" ...

c#javascriptcssasp.net-mvcrazor

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting wi ...

javascriptcsstwitter-bootstrapreactjswebpack