Float to the right, left, and top of the grid

Here is the HTML structure:

<div class="row">
  <div class="cell left">A</div>
  <div class="cell left">B</div>
  <div class="cell right">C</div>
  <div class="cell left">D</div>
  <div class="cell right">E</div>
  <div class="cell left">F</div>
</div>

I am aiming to achieve this layout:

View Example Here

All "cell left" elements should be aligned to the left and top. All "cell right" elements should be aligned to the right and top.

The structure of the HTML needs to remain unchanged. How can I define CSS using FLEX or FLOAT to achieve this when the number or order of cells in each row is unpredictable?

I have attempted to use FLEX or FLOAT for this purpose, but the right cells are not aligning properly with the top.

cssflexboxvertical-alignment

Answer №1

A easy fix would involve utilizing display: grid.

Learn more about grid layout here

When using display: grid, you can define the placement of items like so:

/* Creating 2 columns of equal size, automatically positioning items in rows and filling gaps */

grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;

Next, by applying the left or right classes, you can determine the grid-column where the div should go.

Here is a simple example:

.row {
  display: grid;
  width: 500px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
  gap: 12px;
  outline: 2px solid #000;
  padding: 12px;
}

.cell {
  padding: 12px;
}

.left {
  grid-column: 1 / span 1;
  background-color: pink;
}

.right {
  grid-column: 2 / span 1;
  background-color: lightgreen;
}
<div class="row">
  <div class="cell left">A</div>
  <div class="cell left">B</div>
  <div class="cell right">C</div>
  <div class="cell left">D</div>
  <div class="cell right">E</div>
  <div class="cell left">F</div>
</div>

Answer №2

Take a look at this creative approach.
Essentially, we're establishing a flex container that flows in a column format to stack all elements vertically. By expanding the width, we can accommodate cells on both the left and right sides. Within a flex container, you have the flexibility to align elements vertically or horizontally at the start, center, or end positions. With two distinct classes featuring different alignments, instead of applying a single align-items property to the parent element (row), I utilized individual self-align values on each class: one set to flex-start and the other to flex-end.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .row {
      display: flex;
      flex-direction: column;
      width: 200px;
    }
    .left {
      align-self: flex-start;
    }

    .right {
      align-self: flex-end;
    }
  </style>
</head>
<body>
<div class="row">
  <div class="cell left">A</div>
  <div class="cell left">B</div>
  <div class="cell right">C</div>
  <div class="cell left">D</div>
  <div class="cell right">E</div>
  <div class="cell left">F</div>
</div>
</body>
</html>

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

Mastering CSS positioning and perfect alignment

I'm currently working on a website where I want the text to be centered on the page without scrolling. Although I have the container div centered, I'm struggling to align the text properly. It's crucial that h1 has a position: fixed because ...

htmlcssbootstrap-4css-animationspositioning

Can anyone help me with fixing the error message 'Cannot assign to read-only property 'exports' of the object' in React?

Recently, I decided to delve into the world of React and started building a simple app from scratch. However, I have run into an issue that is throwing the following error: Uncaught TypeError: Cannot assign to read-only property 'exports' of o ...

javascripthtmlcssnode.jsreactjs

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

css

How can I arrange an ItemTemplate and Alternating ItemTemplate next to each other in a Gridview layout?

My webpage features a "Reports" page that will dynamically display buttons (formatted ASP:Hyperlinks) based on the number of active reports in a table. While everything works well, I am struggling with achieving the desired layout. I want my buttons to app ...

htmlcssasp.net

Reposition the button alongside the textarea

Seems like this is a common inquiry. I am still learning the ropes when it comes to CSS and JavaScript. I have a textarea with a button beneath it, and I would like the button to stay aligned with the textarea as I resize it! Any suggestions on how I cou ...

htmlcsstextarea

"Enhance the visual appeal of your Vue.js application by incorporating a stylish background image

Currently, I am utilizing Vue.js in a component where I need to set a background-image and wrap all content within it. My progress so far is outlined below: <script> export default { name: "AppHero", data(){ return{ image: { bac ...

javascripthtmlcssvue.js

Flex-boxes are set inside a fixed-positioned div in this chat web application

I am currently working on a chat web application that has a unique bottom bar layout. The bottom bar consists of a button on the left, a text entry field in the center, and another button on the right: <div id="bottom-bar"> <div class=" ...

htmlcssflexbox

the styling gets disrupted by the addition of grid columns

Looking for help with aligning and spacing three sets of strings in a single line while maintaining grid columns intact, even when window size is reduced. Currently experiencing alignment issues like this: https://i.stack.imgur.com/iqlam.png Tried removi ...

htmlcssangular-bootstrap

Creating personalized templates in DJANGO - Efficiently linking help_text to individual fields

When creating a registration form using my own CSS and HTML, I encountered an issue with displaying error messages from Django's default help_text. Although I can show the help_text using the code below, I am having trouble associating the errors with ...

pythonhtmlcssdjango

What is the best way to add space between div elements with bootstrap classes?

For my project, I am utilizing bootstrap and I need to create space between divs. Here is the code I am using: <div className="container"> <div className="row"> <div className="col-lg-4 col-md-4 col-sm-12 col-12 box">a</div&g ...

cssbootstrap-4

Attempting to position a centrally aligned div block containing images towards the left side

I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered: See below: Here is the HTML and CSS code ...

htmlcss

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

I'm attempting to achieve full coverage of the parent div section by my child div section. Take a look at the Example URL (specifically where the Canadian Flag Stand Up Paddle Boarders are located) towards the bottom: Essentially, when I set the widt ...

htmlcssdynamicheight

Exploring the efficiency of different CSS selectors

I am struggling with the following code: HTML: <ul class="list"> <li class="list-item"> item 1 </li> <li class="list-item list-item_active"> Active item </li> <li class="list-item"> item 3 </li> ...

performancecsscss-selectors

Place in the Middle of a Bootstrap Container

Struggling with aligning the elements of a Bootstrap well in the center? The badge is off to the side instead of below the arrows, and the vote buttons are not centered within the well. Check out the code snippet below: HTML: <div class="col-md-1 ...

csstwitter-bootstrap

Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock. Here's what I want: There's a button. There's a rect ...

htmlcssanimationhovertransition

I am struggling to increase the width of my input bar and center-align it

Below is the CSS class I've created to ensure that all elements remain centered on the user's screen. container: { display: "flex", position: "absolute", top: 0, left: 0, height: "100%&qu ...

htmlcssmaterial-ui

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

javascriptcssslick.js

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Whenever I create a new JavaScript application, the CSS files do not seem to reflect the most recent changes

My Next.js App is running smoothly on my client when I do npm run build and test it with node server js. However, the issue arises when I move the app to a production server. After executing npm run build on the server, everything seems to work fine except ...

cssnode.jsnext.js

What is the best way to split an image in half without displaying it and avoiding any horizontal scrolling on the page?

https://i.sstatic.net/Kj99o.png https://i.sstatic.net/W1BQ8.png Trying to align the two images shown above, but facing issues with making it responsive. The SVG image exceeds the container boundaries, causing horizontal scrolling. The goal is to have the ...

htmlcssreactjs