Designing CSS elements that flow from top to bottom, left to right, and extend to the right when overflowing

I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur.com/jHRip.png

So far, I've experimented with various combinations of CSS and JavaScript including properties like white-space:nowrap, display: inline, display: table, float:left, among others, but have yet to achieve the layout as depicted in the diagram.

javascriptcsshtmloverflow

Answer №1

To achieve the desired layout, apply float: right to each of the div elements.

For a visual demonstration, check out this fiddle: http://jsfiddle.net/developer/jZKqR/ (adjust the pane size to observe the effect).

Another useful fiddle showcasing column creation can be accessed here: http://jsfiddle.net/developer/jZKqR/

This approach utilizes jQuery:

var maxHeight = $('.overflow').height();
var floatHeight = $('.float').height();
var amountOfFloat = $('.float').length;

if(floatHeight * amountOfFloat > maxHeight){
    var minPer = Math.floor(maxHeight / floatHeight);
    var overflow = $('.overflow');
    $('.float').each(function(index, item){
        console.log(item, index);
        if(index%minPer == 0 && index != 0){
            overflow = $('<div>', {class: 'overflow'});
            $('body').append(overflow);
        }
        $(item).appendTo(overflow);
    })
}

Answer №3

Although not fully supported yet, CSS3 does offer multi-column layouts for websites.

For more information, visit

Answer №4

What do you think of this suggestion?

http://jsfiddle.net/nPSUM/6/

It might not function exactly as desired, but it's very close to the expected behavior.

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

What is the correct way to route requests to /api/ressource in a production environment?

In my development environment, I have set up a webpack dev configuration where my front-end server runs on port 8080 and my backend server runs on port 3000. Here is how I configured my webpack dev server: proxy: { '/api': 'http://localh ...

javascriptnode.jsexpresswebpack

Addressing component validation conflicts in Vuelidate on VUE 3

I am currently experiencing an issue with VUE 3 Vuelidate. In my project, I have 2 components that each use Vuelidate for validation (specifically a list with CRUD functionality implemented using modals). However, when I navigate from one component to anot ...

javascriptvue.jsvuejs3vuelidate

Struggling to align elements in the horizontal center using CSS Grid

https://i.stack.imgur.com/y6F74.png I am currently working with a CSS Grid layout and facing an issue where I want to center the child elements horizontally. In the image provided, my goal is to have "Queen" displayed in the center rather than on the left ...

htmlcsssass

Sending data to another page in React Native can be achieved by passing the values as parameters

I am currently working on passing values from one page to another using navigation. I have attempted the following code: this.props.navigation.navigate('welcome', {JSON_ListView_Clicked_Item:this.state.email,})) in the parent class where I am s ...

javascriptreact-nativenavigationreact-navigation

Ways to customize the TextInput component in React-Admin

I am facing a challenge with overriding specific fields in my custom theme. It seems that setting the custom theme also overrides other fields unintentionally. I attempted to use useStyles to resolve this issue, but unfortunately, it did not work as expec ...

javascriptreactjsmaterial-uireact-admintextinput

Certain HTML code on a webpage is currently inaccessible to me

Struggling with web scraping on a webpage due to inaccessible code. The part of the page's code that remains out of reach is only accessible through an anchor tag, with the following html: <a class="MTLink" href="#d192633539-47" title="example" &g ...

htmlweb-scraping

Exploring the concept of Promises through the lens of recursion

I am dealing with a MongoDB collection that looks like this [ { "classId": "1", "name": "Input", "definition": [ { "property": [ { "classId": "12", "name": "One" }, { ...

javascriptnode.jspromise

What are the solutions for resolving the TypeError when undefined is not an object error?

I'm currently working on a project where I need to fetch data from a JSON file using XMLHttpRequest and then store it in an array. However, I keep getting errors when attempting to do so. Take a look at this code snippet that seems to be causing the ...

javascriptxmlhttprequest

The specified file ngx-extended-pdf-viewer/assets/pdf.js cannot be found

I have integrated the ngx-extended-pdf-viewer package in my Angular application using npm to enable the display of PDF content. According to the setup instructions, I have added the following configuration in my angular.json file: "assets": [ ...

javascriptnode.jsangulartypescriptpdf

What is the best way to utilize typed variables as types with identical names in Typescript?

Utilizing THREE.js with Typescript allows you to use identical names for types and code. For instance: import * as THREE from '/build/three.module.js' // The following line employs THREE.Scene as type and code const scene: THREE.Scene = new THRE ...

javascripttypescript

The Child/Parent arguments in Typescript methods cannot be assigned

Why is this not working in TypeScript? class Parent { id: string = '' } class Child extends Parent{ name: string = '' } const fails: (created: Parent) => void = (created: Child) => { return }; const failsToo: ({ create ...

javascripttypescript

Experiencing an issue with Firestore returning null instead of data in JavaScript

I have created a form that, upon submission, adds a document with the data to my Firestore database. Additionally, I have set up a real-time listener on the collection where the document is added. onSubmit={async(e) => { e.preven ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestorenext.js

Tips on using htmlspecialchars in combination with a href:To safely include links in

If I have the following code: $text = "please visit this <a href='http://example.com'>site</a>." $text = htmlspecialchars($text); echo $text; The output will be please visit this <a href='http://example.com'>site< ...

phphtmlhyperlink

Incorporating a hyperlink into an HTML submit button

Recently, I started working with MySQL and decided to create a basic registration page. However, upon clicking the submit button, I would like to be redirected to another page, possibly a login page as seen on many websites. I am struggling with figuring ...

phphtml

Formik React struggling with error management and handling tasks accurately

I am currently using the Formik template to develop a Login Form. onSubmit={( values, { setSubmitting, setErrors /* setValues and other goodies */ } ) => { props.logMeIn(va ...

javascriptreactjspromise

Incorporating a <script> tag in Angular 8 to reference an external JavaScript file from a different website

I am currently using Angular 8 and its CLI to develop my website. Issue: I need to include an external JavaScript file from a different website by adding a <script> tag, for example: <script src="https://www.wiris.net/demo/plugins/app/WIRISplugin ...

javascriptangular

Safari displays text in a noticeably bigger font size compared to other browsers

I'm currently working on a website and have noticed that the fonts appear larger on Mac's Safari compared to other browsers. We are using the 'Open Sans' font from Google Fonts for our website. For example, here is a CSS snippet for ti ...

htmlcsssafari

The functionality of TypeScript's .entries() method is not available for the type 'DOMTokenList'

I'm currently working with a stack that includes Vue3, Vite, and TypeScript. I've encountered an issue related to DOMTokenList where I'm trying to utilize the .entries() method but TypeScript throws an error saying Property 'entries&apo ...

javascripttypescriptvue.jsvite

Can IE(7?) cause distortion of backgrounds from sprites?

This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...

cssinternet-explorerbackground-imagesprite

Encountering Issue: Exceeding the number of hooks rendered in the previous render cycle

Every time I load my Nextjs page, an error message displays: "Error: Rendered more hooks than during the previous render." I attempted to fix this by adding if (!router.isReady) return null after the useEffect code. However, this caused a problem where th ...

javascriptreactjsnext.js