Creating dynamic "floating divs" with consistent width but varying heights, alignment challenge

Seeking assistance to solve the following challenge:

Description of Issue: We are dealing with dynamically generated "floating divs" that have equal width but varying heights based on their content. The "Parent container" will have different width parameters to accommodate either 2, 3, or 4 divs (in the attached example there are 2 columns and 3 rows) without gaps between them. The order of the divs should go from left to right, always maintaining hierarchical order by numbers 1, 2, 3, etc.

How can we achieve this layout without gaps caused by traditional float methods?

The number of divs being created is dynamic and not limited...

The solution needs to be compatible with IE8 and IE9.

Thank you, Jonathan.![enter image description here][1]

An example illustration can be found at:

javascripthtmlcssresponsive-designfloating

Answer №1

Maybe you should explore using a tool similar to Masonry.

Answer №2

A Unique Approach to Multi-Column Layout Using Pure CSS - Compatible with all Browsers

Instead of relying on floating elements, consider using a column layout.

Check out this live demo showcasing a 3 column layout that can easily be adapted to N columns.

For an N Column Layout, create N containers, each with a width of 100/N% and populate them accordingly.

Arrange your dynamic content in the correct sequence to fit into the respective columns smoothly.

Below is a sample HTML & CSS snippet for a 3 column layout:

<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>

.Container {
    float: left;
    width: 31.33%;
    margin: 1%;
}

The JavaScript used in the demo is specifically designed to add dynamic content. It can accommodate varying heights as well as fixed heights.

Just a side note: A 2 column layout doesn't require the same approach. Simply float odd items left and even items right. See example here

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

Tips for displaying only one image when clicked and hiding other divs:

Currently tackling a project that involves JavaScript and I've hit a roadblock. Before you dive into the text, take a look at the image. Check out the picture here. I have successfully created a slider, but now I want to implement a feature where cli ...

javascriptjqueryhtmlcss

Manipulating variables from the main Node.js file within exported Express routes

Currently, I am working on the backend of a home automation program in Node.js with express as my router. The frontend communicates with the backend through about 50 routes that cover various aspects of the program such as querying device states, updating ...

javascriptnode.jsexpressmoduleroutes

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Encountering a peculiar mystery issue here... I have created a button on a webpage that triggers a form submission. The form is enclosed within a DIV, which dynamically updates to display the modified data. (this is embedded in a smarty template) form: ...

javascriptphpjqueryhtmlajax

AngularJS application is throwing an error indicating provider $q is not recognized

Could someone please advise on what might be the issue with my code snippet below: var app = angular.module('app', [ 'angular-cache', 'angular-loading-bar', 'ngAnimate', 'ngCookies', &a ...

javascripthtmlangularjs

Next.js: How to retrieve route parameter within getServerSideProps

I need to retrieve data from my Supabase table using the ID provided in the URL slug, for example localhost:3000/book/1, and then display information about that specific book on a page built with Next.js. Table https://i.stack.imgur.com/t5z7d.png book/[ ...

javascriptnext.jssupabase

Troubleshooting jQuery.ajax - Why won't it function properly?

I've been struggling to get the ajax service functioning properly. I tried a simple $.get("http://google.com"), but it didn't work. Additionally, this code snippet failed as well: <html> <head> <script src="https://aja ...

javascriptjqueryajaxcross-browser

Enhancing Your React.js app with Script Insertion Using HTML/JSX

I'm attempting to apply a style to an HTML element only when the property of an array of objects meets a certain condition, but I encountered this error: /src/App.js: Unexpected token, expected "..." (35:25) Here's my code: codesandbox export de ...

javascriptreactjsjsx

Steps for deploying Nuxt on a subdirectory using either Express JS or Plesk

I have configured my Nuxt (Node.js application) to run on Plesk. This means that Plesk will execute the server.js file, which in turn runs ExpressJS and then Nuxt. Here is the content of my server.js file: const express = require('express') cons ...

javascriptexpressnuxt.jsplesk

Find the elements of <a> tags specifically without the attribute href

Currently, I am extracting the class of all <a> elements in an HTML document of a webpage using VB.net from a WinForm: Dim htmlLinks As HtmlElementCollection = WebBrowser1.Document.GetElementsByTagName("a") For Each link As HtmlElement In htmlLi ...

javascriptjqueryhtmlcssvb.net

Guide on using JavaScript to automatically scroll a HTML page to the top on any mobile browser

Can JavaScript be utilized to smoothly scroll an HTML page to the top? I am looking to achieve this with a stylish animation that functions correctly on all mobile browsers. jQuery is the library I am using on this particular page. Thank you, ...

javascript

Only consider valid values for input and ignore any zeros

I am working on a form where I need to accept any number, regardless of if it's negative, a float, or a long integer. I have implemented code to not allow null, undefined, or empty values, but I encountered an issue where entering 0 is being read as e ...

javascripthtmlgetelementbyid

How can I guarantee consistent UTF-8 encoding in Nokogiri parsing, ERB templates, and encoding HTML files using Ruby?

After successfully parsing parts of a website, I encountered an issue with UTF8: get '/' do url = '<website>' data = Nokogiri::HTML(open(url)) @rows = data.css("td[valign=top] table tr") erb :muster I am now attempting ...

htmlrubyparsingutf-8nokogiri

Access an object's property from within a callback function

I have an async.series() function that is calling a method from another Javascript object: main.js var obj1 = require('./obj1'); var obj2 = require('./obj2'); async.series([ obj1.myFunc1, obj2.anotherFunc ]); obj1.js module ...

javascriptnode.jsasync.js

Fixing Email Validation Error in AngularLearn how to troubleshoot and resolve

I'm encountering an issue when trying to develop an email center using regex pattern, as I'm receiving a validator error in HTML. I have already installed ngx-chips and angular-editor, imported all the necessary modules and dependencies. Here is ...

htmlangulartypescriptformsvalidation

Exploring data in C# using HtmlAgilityPack to extract information from a table

I've been working on a project for some time now, and here's the situation: A friend of mine has a web application that generates data for charts using HTML. I need to extract specific values from a table on his website so that we can store this ...

c#htmlhtml-agility-pack

How can I convert a PHP array into radio buttons in an HTML form?

I'm looking to develop a survey using HTML, PHP, and Javascript. I have my questions and answers stored in a csv file (which will eventually be transferred to a SQL server). My main concern is how to convert my answers into radio button types so that ...

phphtmlarrays

Tips for updating the bottom color of Material-UI TextField without relying on the <MuiThemeProvider> component

I am facing an issue with a Material UI TextField component that is placed on a dark background. I need to change the text and line colors to red for only this particular instance, while leaving the rest of the TextFields unaffected. My project utilizes @ ...

javascriptnode.jsreactjsecmascript-6material-ui

Using three.js lookAt() to align a local axis that is not the positive Z axis towards a different object

Currently, I am in the process of developing an application in which a character (depicted as a cone shape for now) is positioned on a specific surface (currently represented by a cylinder placed horizontally). My goal is to have the character's feet ...

javascriptthree.js

Surprising T_STRING mishap

Here is the error log: PHP Parse error: syntax error, unexpected 'deleteBike' (T_STRING), expecting '(' in /var/www/html/page/db.php on line 126, referer: http://localhost/page/adminpage/intro.html [Wed Jan 17 20:29:17.889348 ...

phphtmlmysql

intercepting a form prior to submission and modifying the JSON format

I am working on a form that needs to be reformatted before being sent to the backend in a readable way. One example is a survey with a structure like: { survey_id: (string), responses: [ { question: (String) ans ...

javascriptjqueryjsonejs