Creating a vertical stack of floating divs using HTML

https://i.sstatic.net/KwOJh.jpg When stacking DIVs with varying heights, a lot of empty space is created when they break to the next line, as shown in Group 1 and Group 5 in the image. I've tried using inline-block, float:left, display: flex;flex-wrap: wrap; and some other properties but can't seem to figure this out. I've seen other posts recommending JQuery-based solutions. Is it possible to achieve a Pinterest-style layout using only HTML and CSS?

<html>
<head>
<style>
    body { background: none repeat scroll 0 0 #EFEFEF; font-size:12px;font-family: "Courier New", "Courier", "monospace"; }
    fieldset{border-color: grey;border-style: solid;} 
    div.groups{ width:300px;float:left;padding:5px 3px 5px 8px;}
    div.container{ width:100%;}
</style>
</head>
<body><br>
<div class = "container">
    <div class = "groups"><fieldset> <legend><b>Group 1</b></legend>
    <ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 5</b></legend><ol><li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
</div>
</body>
</html>
htmlcss

Answer №1

Aligning vertical spaces between components cannot be achieved using floats. Additionally, there is no requirement for JavaScript or jQuery when you have the option to utilize CSS columns:

body {font-size: 12px; font-family: "Courier New", "Courier", "monospace"}
fieldset {border-color: grey; border-style: solid} 
ol {list-style-position: inside}

.container {
  column-count: 3; /* three columns per row */
  column-gap: 0; /* for horizontal gaps between groups */
}

.container > .groups {
  page-break-inside: avoid;
  break-inside: avoid-column;
  padding: 5px 8px;
}

@media (max-width: 768px) {
  .container {column-count: 2} /* two columns per row */
}

@media (max-width: 480px) {
  .container {column-count: 1} /* one column per row */
}
<div class="container">
  <div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  </ol></fieldset></div>
  <div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class="groups"><fieldset><legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class="groups"><fieldset><legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class = "groups"><fieldset><legend><b>Group 5</b></legend><ol><li></li> <li></li>
  </ol></fieldset></div>
  <div class = "groups"><fieldset><legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class = "groups"><fieldset><legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
</div>

This method is entirely adaptable to different screen sizes.

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

Adjusting Picture Sizes to Fit the Dimensions of a Photo Frame

Currently, I am in the process of developing a website that incorporates two distinct image types: Portrait photos https://i.sstatic.net/rmIXQ.jpg Landscape photos https://i.sstatic.net/Z7mr3.jpg As you can see, there are two different categories of ...

javascriptphpjqueryhtmlcss

Gathering data from an HTML table along with the corresponding href links using R

My goal is to download a table that includes both text and links. I have managed to download the table using the link text "Pass", but now I want to capture the actual href URL instead of the text. library(dplyr) library(rvest) library(XML) library(httr) ...

htmlrxpathrvest

Challenges with text in a Bootstrap 5 responsive carousel

I'm currently in the process of developing a new website and I am utilizing bootstrap 5. One issue I have encountered is that the text and button within the carousel in the header section do not appear to be compatible. To provide better clarity, I wi ...

htmlcsscarouselbootstrap-5

Is it possible to display just the progress bar and controls on a YouTube video that is embedded?

I've spent the last few hours trying to figure out how to turn a YouTube video into an audio player, but I haven't had any success. So far, I've come across three main options: 1. Adjust the height of the iframe to 25px, but I find that visu ...

javascripthtmlcssyoutubeembed

Only include input on a div if it contains a value

In my HTML code, I have several input fields where the values are added together in a div using JavaScript. However, one of the inputs (color) is optional. I only want to include the color in the div if it has a value; otherwise, I want it to be excluded c ...

javascripthtmljquery

switching back and forth between the registration and login forms

<script> $(document).ready(function(){ $("#register_link").click(function() { $("#login_or_register").empty(); $("#login_or_register").load("register_form.php"); }); $("#login_link").click(function() { $("# ...

javascriptjqueryhtmlcssajax

The CSS transition feature does not seem to be functioning properly when it comes to displaying

In my Next.js application, I am using a card component with a "read more" link that should expand the card when clicked. To achieve this behavior, I integrated the "react-show-more" library from https://github.com/One-com/react-show-more. I tried to add ...

htmlcssreactjsnext.js

What happens when the next button is clicked without any items selected?

I am working on a dynamic HTML page where a section changes based on user-selected options. Here is the part that displays the options: <div class="form-group-lg"> @foreach (var response in Model.ListResponses) { ...

javascriptc#jqueryhtmlasp.net-mvc

The sign up feature is functioning properly on one script, but encountering issues on another

I am facing an issue with a sign-up function in my script. I have transferred it to a new project, made changes to the variables such as form inputs, table/database names, etc., but the script is not functioning as expected. Signup.php <form class="fo ...

phphtmlmysqlforms

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

javascripthtmlcsscanvas

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation

Strange floating elements wrapping inside Bootstrap 3 column divs

Essentially, I have a series of twitter-bootstrap square divs with classes like col-md-x, col-sm-x stacked together to form an image list. It's functioning smoothly for the most part. However, there are instances (which remain a mystery to me) where t ...

htmlcsstwitter-bootstrap

Having Trouble with Text Alignment in jsPDF fromHTML()?

I've been working on generating HTML code for a PDF document using jsPDF. Everything seems to be functioning correctly, except for the alignment of the text. Here's a preview of the generated PDF: https://i.sstatic.net/Kq1jM.jpg My JavaScript c ...

javascripthtmlpdfpdf-generationjspdf

Could CSS transitions stack on top of each other?

My current approach involves using CSS to create sliding menus. With JavaScript, I simply apply a class to trigger the CSS animations. The menu consists of 4 columns with list items in desktop mode, but collapses into only headings in mobile mode. These he ...

htmlcss

How can we reduce the jitter experienced during page initialisation?

Is there a way to reduce the jittering effect on a page when using frameworks like jQuery/UI, especially with widgets like the button widget during layout processing on page load? I found setting the body tag to display: none, and then using $(function() ...

jqueryhtml

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

javascriptjqueryhtmlangularjsclick

Even though the if statement has been implemented, the page continues to show null objects

So, I have an if statement that filters out null objects and it's working fine. However, when I try to insert something in join() like join("li"), all null objects are displayed on the page as shown in the image. I just want to display objects that ar ...

javascriptjqueryhtmlcss

How can I arrange a table in Angular by the value of a specific cell?

Here's the current layout of my table: Status Draft Pending Complete I'm looking for a way to sort these rows based on their values. The code snippet I've been using only allows sorting by clicking on the status header: onCh ...

htmlangulartypescriptangular-material

Using percentages to position Div elements

Currently, I am working on an HTML page that requires a div element spanning the full width of the page. My goal is to arrange other divs within this full-width div using percentages rather than pixels. The class associated with this div is .question. Thi ...

javascriptcss