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

Collapsing Bootstrap menu bar causing logo overlap

When the navbar collapses (when it shows the toggle icon), the menu items (home, services, portfolio, about, contact) overlap with the logo. If I remove the position:absolute from the logo (navbar-brand), the menu appears in the center. Is there a way to h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to load the response from the $.post function, which contains GIF content, into a JavaScript Image object

How can I preload an image that the server only returns on a POST request? I want to load the image before displaying it. How can I store the result in a JavaScript object? $.post('image.php', {params: complexParamsObject}, function(result) { ...

javascriptjqueryajaximagedownload

Implementing the Delete feature using AJAX in this specific scenario: What is the best approach?

My website utilizes PHP, Smarty, MySQL, jQuery, and other technologies. It involves fetching a large amount of data from the database and presenting matching question ids on a webpage. This process of retrieving and displaying the matching question ids for ...

javascriptphpjquerymysqlajax

Disallow/bound the position of the marker on Google Maps

Is there a way to restrict the placement of markers on a map? I am looking for a solution that allows me to limit the marker position within a specific area, such as a town, with a radius of 10km. It should prevent users from dragging or creating new mark ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-maps-markers

The footer seems to detach on certain pages

Currently, I am facing a frustrating issue while working on a website. The footer seems to be disconnected from the main body content on certain pages, while on others, it appears to be properly attached. Despite my efforts to troubleshoot by removing elem ...

css

Issue with displaying elements at intended layering order when parent element has fixed positioning

My web app features both upper and lower elements (div) with a position: fixed. Each element has child popups also with position: fixed. Even though I want to position the popup above its parent element, using z-index doesn't work due to inheritance ...

htmlcsscss-positionz-index

When hovering over the sidebar, it smoothly slides out. (ideally using only CSS)

I've been spending my free time working on a website, but I'm struggling to figure out how to create a navigation similar to the one featured on FontShop's site: . I want it so that when you hover over their logo (or in my case, a blank rect ...

jquerycssnavigationhover

Triggering the opening of a select box each time an anchor tag is clicked using jQuery

<a href="" >add Select box</a> I am looking to create functionality where clicking on the anchor tag opens a select box. With each new click, a new select box should appear. For example, if I click on the anchor tag once, a select box should a ...

jquery

Link that causes the regular expression test to hang

My goal is to create a regular expression that can accurately identify URLs. I found the code snippet for this on Check if a Javascript string is a url. The code looks like this: function ValidURL(str) { var pattern = new RegExp('^(https?:\/&b ...

javascriptjqueryregex

Ways to modify the font style of Python comments in JupyterLab's code cells and code editor:

Many resources discuss how to change font families for all content, but I am seeking guidance on making syntax-specific changes. For example, I would like to switch the font style of Python comments from italic to normal. Can anyone offer assistance? Thank ...

pythoncssjupyterjupyter-lab

External style sheet link is not operational

Inside base.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Base</title> <style> body { background: blue; } </style> </head> <body> &l ...

phphtmlcss

Unable to retrieve button value through ajax call

I have my code below and I am trying to retrieve the value of my submit button in the AJAX section without success. Can someone guide me on how to accomplish this task? <script src="http://localhost/ci/js/jquery.js"></script> <script type=" ...

phpjqueryajaxcodeigniter

Implementing a redirect following the notification

I'm facing an issue with a function that sends form data to Google Sheets. How can I make the redirect button work after displaying an alert message? I attempted using window.location.href='', but it redirects without submitting the data. & ...

javascripthtmljquery

Ensure that the contents of the upper and lower divs are appropriately aligned, while maintaining the centered positioning of the

As a complete beginner in the world of HTML and CSS, I am facing a challenge with my code. Here's the HTML snippet: <section class="instructions"> <div class="row"> <div class="instructions-col" ...

htmlcss

Struggling to send an array through Ajax to Django view?

I am just starting to work with ajax and I want to pass an array from JavaScript to my view. Here is the template. I have a form that takes the course ID number and score from students, creates a table, and adds how many courses the student wants to add. ...

javascriptjquerypythonajaxdjango

Error message: "Maximum width header anomaly"

I've been working on a full-width header tumblr theme and everything looks great until I resize the screen to a smaller size, like on a mobile or tablet. The header ends up cutting off and no longer maintains its full width. You can see an example of ...

htmlcsstumblr-themes

When using WebAPI, be aware that posting HTML entities may result in parameters

When sending the data of a div to the server using jQuery's AJAX method, everything seems to work fine. However, I noticed that when my content includes HTML entities like &nbsp;, it gets truncated in my Web API controller. Raw POST From Fiddler ...

jqueryasp.net-web-api

Ordering tables in jQuery with both ascending and descending options

Trying to sort a table in ascending and descending order using jQuery? Here's the JavaScript code for it. However, encountering an error: Cannot read property 'localeCompare' of undefined If you can provide guidance on how to fix this so ...

javascriptjqueryhtmlcss

Acquiring the value of jQuery for utilization in PHP

Below is the code I am working with: $('#topic').on('change', function() { var sel = $(this).find('option:selected').text(); $.ajax({ type: 'post', dataType: 'text', url: ...

phpjqueryajax

Floating footers with centered content - they remain aligned in the center even when zoomed out

Behold my unique and straightforward footer design (100% zoom above, 70% zoom below) : To keep things simple, I aimed to center content with a single div having a fixed width and margin: 0 auto, all while maintaining the same color for the outer footer la ...

htmlcss