Achieving full coverage of space with divs in a layout of 3 columns, with fixed widths and varying heights

Understanding this concept is best demonstrated through the image provided below. Notably, there are 3 divs aligned next to each other with a fixed width but varying heights.

In the event that I introduce a 4th div, my preference would be for it to fit under the 2nd div if space allows.

I envision subsequent divs optimizing available space by fitting in where possible, utilizing it efficiently.

I recall witnessing a jQuery plugin achieving this functionality before, yet I am unsure of the specific technique or name associated with it!

Your insights are greatly appreciated.

Answer №1

If you're looking for a solution, check out the amazing plugin called jquery masonry.

Answer №2

Discover jQuery Masonry

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

Unexpected behavior of jQuery in Internet Explorer

I'm grappling with a challenge and need some assistance. Despite my efforts, I can't pinpoint the exact source of the issue... The problem lies within an interactive graphic designed for Chrome users. This graphic includes variables that change ...

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

Do not delete blank notes upon saving

Issue: When multiple notes are created simultaneously, and the same text is entered in the first note and saved, the blank remaining notes are not removed upon page reload or refresh. How can I ensure that empty notes are deleted and only notes with conten ...

Is that possible to prevent the use of the & symbol in Angular 4 HTTP requests?

Using an HTTP request to save data in my database. The code snippet I used is: const form = '&inputdata=' + myinput + '&rf_date=' + rf_date; return this.http.post(this.rootUrl, form, {headers : this.reqHeader}); In thi ...

Utilizing JQuery to extract the image title and render it as HTML code

I am currently facing an issue with displaying an image in my project. I want to hide the image using CSS (display: none) and instead, retrieve the value of its title attribute and display it within the parent div by utilizing JQuery. Despite knowing tha ...

Creating an interactive button using RichFaces and Bootstrap for seamless Ajax functionality

I have a challenge with making a fully clickable span or button that includes a Bootstrap refresh glyph-icon. The current code I have inherited only allows the icon itself to be clicked, leaving the area between the icon and button border unclickable. This ...

I am eager to display this JSON data using AngularJS tables

I have JSON file with content about categories, departments, and digital marketing: { "categories":[ { "dept_id":"123", "category_name":"database", "category_discription":"list of database", "current time ...

Using jQuery to apply gradient fill to SVG elements

Is it possible to create a gradient fill in an SVG with two or three colors dynamically? Currently, filling an SVG path with just one color can be done easily. Radial gradients are an option but don't offer much flexibility as colors have to be define ...

Fetching arrays in Javascript

I am utilizing the Dragsort plugin and aiming to tag IDs in an array for printing. Here is my HTML code: <ul id="list1"> <li class="ss"><div>1</div></li> <li><div>2</div></li> <li>&l ...

Showing daily weather information using the Dark Sky API

I'm struggling to make my weather application function properly with a 5-day forecast using the Dark Sky API. While I was able to successfully display the current weather by using "currently" as the keywords in my URL, I am encountering difficulties i ...

Switching between different ng-model variables in AngularJS

I am currently working with AngularJS and implementing an ng-repeat block. I am trying to create a unique/dynamic ng-model name. The purpose of this code is to increase the value in the textbox when a button is clicked. Although the parameter names appear ...

Showing a blob image retrieved from a database in Spring Boot is a common task that can be accomplished

Greetings, dear community. I am facing an issue while trying to display an image received from MySQL via Base64 encoding. The image uploads and stores in the database without any problems. Here is my model class: @Entity public class PostModel { @Id @Gen ...

Update the link's name and href using jQuery

i have a link with this href <div id="site_change"> <a id="mysite" href="https://halloweentorino.com/">halloween torino</a> </div> but I want to change the href and the name of the link within it <div id="site_change"> ...

Looking to implement a delay in the model popup using Pure JavaScript

Looking for a method to implement a delay in the popup... I've tried a few solutions without success. What's the secret to adding a delay to the modal below? Any help is greatly appreciated. var modal = document.querySelector(".modal"); var t ...

Bootstrap 4.0 fixed navbar - Resolved alignment problem

I am working on dividing my navbar into two equal parts. I want the right side to contain my menu and the left side to have my icon and search bar. When the search bar is clicked, it should extend to fill the rest of the half in the left part. I have manag ...

What is the process for populating a checkbox with data from a configuration file using JavaScript?

I have a requirement where I need to populate a list of checkboxes with data from a configuration file. To elaborate, if my checkboxes are meant to select sports, within my JSON configuration file I have an array like this: sports: ["Tennis", "Rugby", "S ...

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

Creating dynamic content in the Ajax-enabled Smart Admin theme: A step-by-step guide

As I work on developing an application for a client, my focus is on creating a web service using Laravel5 for the backend. To enhance the user interface of this web service, I have chosen to incorporate the Smart Admin Theme, specifically utilizing the Aja ...

Add a prefix to every hyperlink in an HTML document

I'm looking to transfer an HTML template to a Google site using embedded code. The template includes a table with over 500 links that need to be prepended. Is there a method to achieve this without relying on JavaScript? <table class="wikitabl ...

How does [name] compare to [attr.name]?

Question regarding the [attr.name] and [name], I am utilizing querySelectorAll in my Typescript as shown below: this._document.querySelectorAll("input[name='checkModel-']") However, when I define it in the HTML like this: <input [name]="check ...