Arranging div blocks in columns that are seamlessly aligned

I am dealing with a situation where I have several boxes or blocks arranged in a 3-column layout. These boxes are styled using properties like float: left, width: 33%, but they have varying heights.

Is there a way to make sure that the boxes always fill in the empty spaces between rows of columns (for example, ensuring Panel 4 is right under Panel 1 without any gaps)?

For instance:

<style>
.testpanel { width: 33%; border: 1px solid black; float:left;}
</style>
<div class="testpanel">
    Panel 1
</div>
<div class="testpanel">
    Long Panel 1
    <br /><br /><br />
</div>
<div class="testpanel">
    Long Panel 2
    <br /><br /><br />
</div>
<div class="testpanel">
    Panel 4
</div>

Currently, there is always a visible gap between Panel 1 and Panel 4 that I wish to eliminate. Is it possible to achieve this using only CSS without resorting to JavaScript libraries like ?

While I know how to address this issue in a fixed layout by populating content per column, my challenge lies in dynamically generating or deleting panels without being restricted to a specific column.

Bootstrap version: http://jsfiddle.net/WhKLj/1/

jqueryhtmlcssgrid-layout

Answer №1

If you're looking to achieve a Pinterest-style layout in HTML, using float:left on individual elements isn't the best approach. Instead, consider organizing your layout into three column divs.

Here's an example of how you can structure your HTML:

<div class="column" id="left">
    <div class="testpanel"></div>
    <div class="testpanel"></div>
    <div class="testpanel"></div>
</div>
<div class="column" id="center">
    <div class="testpanel"></div>
    <div class="testpanel"></div>
    <div class="testpanel"></div>
</div>
<div class="column" id="right">
    <div class="testpanel"></div>
    <div class="testpanel"></div>
    <div class="testpanel"></div>
</div>

For styling, you can use the following CSS:

.column{
  float:left;
}
.testpanel{
  margin-bottom: 10px;
}

This setup works well, but keep in mind that if you want to dynamically add more test panels to each column, you'll need to use JavaScript or jQuery.

I hope this information is helpful!

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

Resolved the z-index problem with the header and sidebar placement

Hello there! I have come across an issue that I need some help with. I have a fixed sidebar and header on my website, both of which have drop shadows applied to them. However, I don't want the header to cast a shadow on the sidebar as I want them to ...

htmlcssz-indexfixed

Securing Codeigniter against CSRF attacks with AJAX integration

Seeking assistance to troubleshoot a problem with AJAX call in Codeigniter while having CSRF protection enabled. Typically, the system functions smoothly with AJAX/jQuery calls and CSRF protection. However, I am currently facing difficulties with the code ...

jqueryajaxcodeignitercsrf-protection

Difficulty in making Materialize.css column match the height of the entire row

Utilizing React.js, Materialize.css, and certain MaterialUI components in collaboration to build a website. Developed a header (React component, basic div with title and logout button) for the site using a Materialize.css "grid". Issue: The react compone ...

cssreactjswebmaterial-uimaterialize

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss

The loading GIF in jQuery is malfunctioning when displayed simultaneously on multiple div elements

I am currently working on my Laravel dashboard's blade to showcase various statistics. These stats will be updated whenever the date picker is changed. Below is the code for my date picker: <div class="row"> <div class=&qu ...

javascriptphpjqueryajax

Double f span causing unusual behavior in Chrome browser

Why does the highlight focus on "ort" instead of "fort"? It appears this occurs when there are two f's. When I substitute f with other letters, like d, it shows correctly. Could this be a bug in Chrome? Chrome version is chrome83. add: It seems to be ...

htmlcss

Pictures displaying various shapes in contact with each other

I have a unique challenge involving an image that has been physically cut into puzzle-shaped pieces. Is there a way to align these individual puzzle pieces using only HTML and CSS to create the illusion of a single cohesive image once assembled? It' ...

htmlcss

The HTML component fails to acknowledge width settings

I seem to be having trouble identifying an issue or perhaps I am misunderstanding something (I am using daisyui + nx + tailwind css + angular). To simplify my problem, let's consider the following scenarios: In the first scenario, I have: <div cl ...

htmlcssangulartailwind-cssdaisyui

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

My functions are all loading onload three times instead of when they should be called. The most frustrating issue is with an onClick event of a button, where it is supposed to open a new page but instead opens multiple new pages in a loop. This creates a c ...

javascripthtmlreactjsnext.js

Error in syntax: An unexpected token was encountered during an AJAX request

I am currently working on a project that involves looping through multiple JSON files within a directory called "trips" and extracting data from each file to display on the front end of the website. However, I'm encountering a persistent error message ...

javascriptjqueryjsonajax

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

htmlcssreactjs

Focus event in IE does not always work as expected after an ajax request is

Our current focus is on supporting IE8 exclusively. An ajax call retrieves data from the server, replaces the HTML in a container div with the response, and then attempts to focus on an element within the response. However, there seems to be inconsistenci ...

javascriptjqueryajaxinternet-explorer-8dom-manipulation

Encountered an error 'Unexpected token ;' while attempting to include a PHP variable in a jQuery AJAX call

Trying to execute a PHP script that updates a deleted field in the database when you drag a specific text element to a droppable area. Currently, here is the droppable area code: <div class="dropbin" id="dropbin" > <span class="fa fa-trash-o ...

javascriptphpjqueryhtmlajax

When a link is clicked, update the href with a new destination and then trigger another click on the same link using jQuery

I am facing a situation where I need to change the href value of a link upon clicking it using Jquery. For example, let's say I have a link with the href /students/6691/movestudenttonewgroup When I click on this link, I want to prevent the default e ...

jquery

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

javascripthtmlcss

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

cssangularmaterial-ui

What specific element is being targeted when a directive injects a ViewContainerRef?

What specific element is associated with a ViewContainerRef when injected into a directive? Take this scenario, where we have the following template: template `<div><span vcdirective></span></div>` Now, if the constructor for the ...

htmlangulartypescript

CSS regression testing through version control systems and continuous integration

Is there a tool that integrates with CI systems and VCS like Git to automatically assign regression test results to individual commits? Ideally, this tool would provide a concise summary on a main page showing passed/failed numbers for each commit, with th ...

csscontinuous-integrationcontinuous-deploymentregression-testing

Using `this` in a Jquery get() call to reference a callback function

Utilizing the this keyword in the callbacks of $.get() is my current challenge. The outline of my code looks like this: var myObject = { get: function() { $.get(server,data,function(data,status) { this.callback(); }); }, callback: func ...

javascriptjqueryajaxjquery-callback

Invisibility of form data on new page - PHP and Javascript

I have a webpage with multiple hyperlinks. Each hyperlink should redirect the user to a new page with the URL sent as POST data. What I can do: 1. Open the new page successfully. The issue I'm facing: 1. On the new page, I cannot access the URL ...

javascriptphpjqueryhtmlajax