Achieve horizontal wrapping of div elements

Currently, I am developing a blog where search results for articles will be displayed within divs. The design of the website is completely horizontal, meaning that articles scroll horizontally.

Creating a single line of divs is straightforward, but it's not what I have in mind. To better illustrate my idea, let me provide a diagram of how I envision the div layout:

 ______________   ______________   ______________
|    Div 1     | |    Div 4     | |    Div 7     |
|______________| |______________| |______________|
 ______________   ______________   ______________
|    Div 2     | |    Div 5     | |    Div 8     |
|______________| |______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 6     |
|______________| |______________|

However, if the height of the window is increased, allowing more vertical space, the layout should adjust accordingly:

 ______________   ______________ 
|    Div 1     | |    Div 5     |
|______________| |______________|
 ______________   ______________ 
|    Div 2     | |    Div 6     |
|______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 7     |
|______________| |______________|
 ______________   ______________
|    Div 4     | |    Div 8     |
|_______________| |______________|

I refer to this as horizontal wrapping, where divs maximize available vertical space before moving on to a new column.

Initially, I hoped to achieve this effect using purely HTML and CSS, but now I suspect that achieving it may require some JavaScript.

javascripthtmlcss

Answer №1

To achieve this layout, you can utilize the power of Flexbox. Make sure to define a fixed height on the parent element or use 100vh along with flex-direction: column.

* {
  box-sizing: border-box;
}
ul {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

li {
  padding: 20px 60px;
  border: 1px solid black;
}
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

Answer №2

It seems like the best way to achieve this layout using only CSS is with flexbox:

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

To see a live example, you can check out this link and adjust the height of the container:

https://codepen.io/MattDiMu/pen/zdBxad

Note: Using 100vh for the size of the container is a much more elegant solution.

Answer №3

Did you know that achieving this in CSS/HTML is actually possible? It's true! By utilizing simple CSS without even using flexbox, you can achieve the desired layout. The key is knowing where to apply certain CSS properties. In this case, setting the box to float:left allows it to consume the width of the container, which can be dynamic such as 50vw for half of the screen width or a percentage.

Check out this example on CodePen

I hope this information is helpful!

[UPDATE]

It seems I misunderstood the question as it mentioned horizontal stacking in the explanation. Nevertheless, this answer may still be beneficial for those seeking a pure CSS solution for horizontal layout.

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

Experience the ultimate entertainment with Flowplayer by watching multiple videos simultaneously in two separate views

I have two separate players in two different views within the DOM. Each player retrieves a video file asynchronously from my database using a unique ID. The first player functions correctly, but I am uncertain how to replicate this for ...

jqueryajaxhtmlflowplayer

Transforming Javascript code using regular expressions into C#

Currently, I am facing a challenge while trying to translate some Javascript code into .NET. Despite my efforts, I have not been able to get it right. The task at hand involves converting paths like /test/:value1/:value2 in Express for NodeJS to a regular ...

c#javascriptregexnode.js

Can we disable hydration warnings for all nested children within a component in NextJS?

Note: I am currently using NextJS 14, but I suspect this issue also exists in NextJS 13. I have created a ThemeToggle component that utilizes the next-themes package. Even if I develop my own version of next-themes using React Context or another state man ...

javascriptreactjsnext.jsserver-side-rendering

What causes a Next.js App to crash when a prop is not defined in destructuring code?

Let me share the issue I am facing. I have developed a custom Context API wrapper to handle all my data. However, there is this docType property that may not always be defined or may not exist at times. When I destructure it in this way: const { docType } ...

javascriptnext.js

Looking to update the background color of a div every 3 seconds?

Every 3 seconds, I need to change the background color of each div. To do this, I attempted to modify the values in the color array every 3 seconds. For example, the value at index 0 (which is "red") would move to index 1, then the value at index 1 would ...

javascriptjqueryhtmlcss

What is the best way to deactivate the time-based trigger in an old version of a Google sheet, while ensuring it remains active in the duplicated new version?

When I initially copied a Google Sheet, I assumed that the app scripts would be duplicated as well. However, it turns out that this is not the case. Here's the background story: I made a version 2 by copying version 1. Because I wanted to ensure that ...

javascriptgoogle-apps-scriptgoogle-sheets

Once the promise program enters the if-condition, even though the condition itself is actually false

There seems to be an issue with retrieving the location code using the AccuWeather API before getting the weather data for a city. Despite the location array being empty, the program still proceeds to a branch that expects a non-empty array. router.get(& ...

javascriptnode.js

How to send parameters through the Google Maps API URL using Vue.js

When using $router.push(), I receive two parameters: {{ this.$route.params.lat }} and {{ this.$route.params.lng }}, which are latitude and longitude coordinates. To access a Google Maps URL, I need to include both of these parameters: https://maps.googlea ...

javascriptvue.js

Combine the values in the rows over a period of time

I have a set of three times in the format of Minute:Seconds:Milliseconds that I need to add together to get the total time. For example, let's say I have: 0:31.110 + 0:50.490 + 0:32.797, which equals 1:54.397. So how can I achieve this using JavaScr ...

javascriptjquery

Angular 5 offers the ability to incorporate dynamic checkbox input into your application

Here is my code snippet: <input [type]="'checkbox'" [(ngModel)]="inputValue"> <p>Value: {{ inputValue }}</p> I'm puzzled as to why the value in inputValue remains unchanged. Can anyone shed light on this? I am unable to ...

javascriptangularangular-forms

Locating the JSON path within an object

Need help with checking if a specific path is present in a JSON object? var data = { "schemaOne": { "name": "abc", "Path": "i.abc", "count": 5347, "subFolders": [ ] }, "schemaTwo": { "name": "cde", "Path": "i.cde", " ...

javascriptjson

The Access-Control-Allow-Origin policy does not permit requests from applications running with an origin of null, specifically for those using a file:// URL

I am in the process of creating a webpage that utilizes jQuery's AJAX feature to fetch images from both Flickr and Panoramio. While the image retrieval from Flickr is functioning properly, I encounter an issue when attempting to use $.get(url, callba ...

javascriptjqueryxmlhttprequestcorsjsonp

Encountering a rendering error with Jest while trying to load a functional child component

I encountered an error message stating Error: Uncaught [Error: Child(...): Nothing was returned from render while testing the Parent component. Below are the relevant files that were involved: /components/Page/Children/Child.js import React from "re ...

javascriptreactjsjestjs

Troubleshooting issue with CSS SVG Clip path functionality - facing technical difficulties

Having an issue with a clip path in my CSS. When I apply the clip path to my CSS fill, the image isn't showing up... I'm using Chrome. Any ideas on how to fix this? I found this helpful generator https://example.com .card .content .picture img { ...

cssgoogle-chromeclip-path

Aligning elements next to each other in html / css without using any top margins

How can I arrange four blocks of text side-by-side, center them over a background image, and ensure they respond well on different screen sizes without using tables? I typically use tables for this layout, but I've heard that CSS/HTML5 can achieve th ...

csshtml

Utilizing MUI for layering components vertically: A step-by-step guide

I am looking for a way to style a div differently on Desktop and Mobile devices: ------------------------------------------------------------------ | (icon) | (content) |(button here)| ----------------------------------------- ...

cssreactjstypescriptmaterial-ui

What is the process for editing a JSON file and preserving the modifications?

I have a JSON file with a key (food_image) and I am looking to dynamically assign the index value in a loop to it, such as food_image0, food_image1 ... food_image{loop index}. After that, I aim to save this modified JSON file under a new name. All values ...

javascriptpythonjson

The dropdown list is nowhere to be found in the page source when using Selenium

Currently, I am engaged in web scraping using Selenium. Successfully locating the input box and entering ID numbers is no issue. Yet, a roadblock presents itself - there is no submit button linked to the search bar. Once the numbers are inputted, the box a ...

pythonhtmlseleniumweb-scrapingmicrosoft-edge

Adjusting hyperlinks placement based on window size changes using jQuery

On resizing the screen, I am moving the sub-nav links to the '#MoreList' It works well initially, but when the window is expanded again, the links remain in the #MoreList instead of going back to their original positions if there is enough space ...

javascriptjquery

Unwanted Data Disguised as jQuery Appending

There seems to be a jQuery function in my code that is adding the string: jQuery15206649508478338135_1314906667378 to user-provided feedback. This issue is occurring across multiple forms and it is being stored in the database, much to the frustration of ...

javascriptjquery