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

Using the .each() method in jQuery to dynamically assign an attribute to a parent element in JavaScript

I'm new to JavaScript and jQuery and I need help transitioning my code from jQuery to pure JS. Within my HTML, there are multiple parent divs each containing a child div. My goal is to assign a class to both the child and parent elements, with the p ...

javascriptjqueryhtml

Basic Chinese HTML Markup

As a college student, I find myself in the unique situation of taking two seemingly unrelated classes that have unexpectedly merged together - programming and Chinese language. In my C++ class, while learning to code in HTML, I took the opportunity to crea ...

htmlc++csschinese-locale

My website gets all wonky when I try to resize the browser

Here is a visualization of my website's ideal appearance: However, the actual display varies on different computers. After testing with browsershots.org, I noticed that my website looks messy on most browsers and even when resizing the browser window ...

htmlcssweb

Using md-chips and md-select together in multi select mode

I'm having trouble generating md-chips when selecting multiple values from an md-select. Does Md-chips only work with autocomplete analyzers and input fields? <md-chips ng-model="launchAPIQueryParams.type"> <md-select name="launchCalTy ...

htmlangularjsangular-material

What is the best way to incorporate a sliding effect into my cookie form?

I created a cookie consent form for my website and I'm looking to include a sliding effect when it first appears and when it disappears after the button is clicked. How can I implement this sliding effect into the form? Here's the HTML, CSS, and ...

javascripthtmljquerycss

What causes the lower gap to be smaller than expected when using "top: 50%; translateY(-50%);" on specific elements within the parent container?

My top-bar layout needs to have all elements vertically centered, but I'm experiencing issues with the top-bar_right-part not behaving as expected when using the core_vertical-align class. The left menu works fine, however. To illustrate the problem, ...

htmlcsscss-positionvertical-alignmentcss-transforms

Tips on customizing the appearance of mat-card-title within a mat-card

Is there a way to truncate the title of a mat card when it overflows? I tried using the following CSS: overflow:hidden text-overflow:ellipsis white-space: nowrap However, the style is being overridden by the default mat-card style. I attempted to use mat ...

javascripthtmlcssangularfrontend

Text overflow occurs when content overflows the space of its container, causing the HTML element to

My English isn't the greatest, but I hope to convey the question clearly. I am attempting to create an editable text within a div. Typically, the text will overflow the size of the div, so I need to contain the text in the div using overflow:scroll. ...

htmlcssscrolltooltipoverflow

I'm working with Angular 12, Bootstrap 5, and ngPrime, and I'm looking to overlap a p-dialog with another element in my project

Is there a way in Angular 12 with Bootstrap 5 using ngPrime to overlap a p-dialog over any other element without using z-index and CSS, solely relying on PrimeNG? I have tried using z-index with: .my-class{ z-index: 2147483647 !important; } However, ...

cssangularmodal-dialogprimengz-index

Positioning a footer at the absolute bottom of a webpage

I am currently working with 2 divs that are absolutely positioned within a relative container. I intend to utilize JavaScript for toggling visibility. .container { position:relative; } .section1 { position:absolute; top:0; left:0; right:0; ...

htmlcss

Exploring the methods of connecting with data-checked and data-unchecked attributes in Angular

Utilizing a toggle switch, I am able to determine what text to display in the div by utilizing html attributes such as data-checked and data-unchecked. In addition, I have an Angular pipe that translates all texts on the website based on the selected lang ...

htmlangulartypescriptproperty-binding

What is the best way to bring a local package into another npm package and verify its functionality using Typescript?

In a scenario where there are 3 npm projects utilizing Webpack and Typescript, the folder structure looks like this: ├── project1/ │ ├── tsconfig.json │ ├── package.json │ ├── src/ │ │ └── index.ts │ ...

htmltypescriptnpmwebpack

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

htmlcssclassinternet-explorer-6

Utilize the $(#id).html(content) method to populate the following column with desired content

Here is a snippet of my HTML code: <div class="row margin-top-3"> <div class="col-sm-7"> <h2>NFTs</h2> <div class="table-responsive"> <table class="table table-bordered&qu ...

javascripthtml

Compiling and rendering HTML code from a file with AngularJS

Here is the custom directive code that I have created: angular.module('app.directives', []).directive('userHeader', ['authService', '$compile', function(authService, $compile) { return { restrict: 'AEC&ap ...

javascripthtmlangularjs

Execute a function only once when using it in conjunction with ng-repeat in AngularJS

I need a way to ensure that a specific function is only called once when used in conjunction with ng-if and ng-repeat. <td ng-if="!vm.monthView && vm.yearView=='contract-year'" nginit="vm.ContractYearBaselines()" class="baseline-data ...

javascriptangularjshtml

Guidelines for dynamically displaying <router-link> or <a> in Vue based on whether the link is internal or external

<template> <component :is="type === 'internal' ? 'router-link' : 'a'" :to="type === 'internal' ? link : null" :href="type !== 'internal' ? link : null" > <slot /> < ...

htmltypescriptvue.jshyperlinkvue-router

Customizing padding and margin in material-UI styles

Having issues with excessive padding and margin inside my tab component, even after trying to override it. I've followed some suggestions on StackOverflow but none seem to work. Here's how it looks: https://i.stack.imgur.com/Bgi3u.png Here is th ...

cssreactjsmaterial-ui

The periodLookup array does not have a defined value for periodStr. Why is this error being caught?

Here is a method that I am working with: set_period_help_text: function(periodInput){ var metric = MonitorMetric.getSelectedMetric(); var periodStr = $('select[name=metric_period]').val(); var datapoints = Number(periodIn ...

javascripthtml

Ensure that the left div spans 100% of the width of the container, while the right div remains on the right side and maintains a

Is there a way to create an effect with a div where the left side is 100% and the right side stays fixed? <!DOCTYPE html> <html> <style> .left { width: 100%; float: left; border: #ccc solid 1px; } .right { width: 50px; float:left; border ...

csshtml