Arrangement of columns with a fluid design

Looking to display checkboxes in a table format, but the number of columns should adapt based on the screen width. Allowing them to arrange themselves results in a layout like this:

+-----------------------------------------------------+
|                                                     |
|   [] label1  [] label2  [] label3  [] label 4       |
| [] label5          [] label6   [] label7            |
|     [] label8  []label9  [] label10  []label11      |
|                                                     |
+-----------------------------------------------------+

However, I am aiming for a layout that looks more like this:

+-----------------------------------------------------+
|                                                     |
|   [] label1  [] label2  [] label3  [] label4        |
|   [] label5  [] label6  [] label7  [] label8        |
|   []label9   [] label10 []label11                   |
|                                                     |
+-----------------------------------------------------+

Is there a way to achieve this desired structure?

The column widths are not a concern, but it is important that the entire content fills up 100% of the container.

Answer №1

#box {
    width:100%;
    height:auto;
    min-height:250px;
    padding:15px;
}
#box div {
    width:80px;
    float:left;
    display:inline-block;
}

Check out the demo on JSFiddle

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

Half of the sections will not stack on mobile devices

UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...

Tips for validating multiple inputs of the same type with identical names in JavaScript

I have limited experience with Javascript and am facing an issue with a HTML form that contains multiple input types with the same names occurring more than once. My goal is to validate the form before inserting the data into the database. I have managed t ...

Insert text within a span tag next to a picture

Greetings everyone, Here is the current structure I am working on: <div class="payment-option clearfix"> <span class="custom-radio pull-xs-left">...</span> <label style="display:inline;width:100%"> <span style="fl ...

What causes the $_FILES superglobal to consistently appear empty?

Check out my page Take a look at my form: <h2>Upload Photo</h2> <form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> Photo <input type="file" name="image" size="30" /> & ...

Ensuring the Selection with jQuery

I've successfully implemented jQuery validation on a text field, but when I try to apply it to a radio button, it doesn't seem to work. I'm not sure what I'm doing wrong. Here is my HTML and jQuery code: <input type="text" placehol ...

The Bootstrap navigation bar vanishes when viewed on mobile devices

I've integrated Bootstrap 5 with my navbar, but when viewed on a mobile device, the buttons disappear. Even hovering over them doesn't display anything. Is there a solution for this issue? Below is the code snippet: <nav class="navbar na ...

What is the best way to ensure that the positioning of the text adapts to

Whenever I adjust the screen size, the text in front of the slider moves. I utilized the grid system in Bootstrap 5.2 to position it. My goal is to keep the text in its original position relative to the carousel when changing the screen size. Here is my co ...

JS script for clicking various icons on a webpage that trigger the opening of new tabs

I am working on a webpage where I have 9 icons with the same class. I am trying to write JavaScript code that will automatically open all 9 icons when the webpage loads. I tried using the code below, but it only clicks on the first icon and stops. let ...

Finishing a division by both clicking outside of it and pressing a button

I am currently working on setting up a dropdown menu that can be closed both by clicking outside the opened div and by clicking the button or image that opens the div. Image with onclick function: <img onclick="hide()" id="menu" src="...."> Th ...

What is the best way to update the src of an input using an onclick event?

When I click the input, my background changes color as expected. However, the src of the input only changes on the second click. How can I make it change the source on the first click? Also, how can I change the src back to the original with a second cli ...

Logo remains in place when scrolling halfway down the page

I have a logo that I want to stay halfway up the home page when scrolling, as if fixed in place until it reaches the footer. body { background-color: #fff; margin: 0; } nav { position: sticky; top: 0; width: 300px; height: 80px; margin:4 ...

I am struggling to retrieve the text from a link element within a hover dropdown

Having trouble clicking on a dropdown menu item that appears on hover? Here is the HTML code of the website I am currently testing: <div id="header-nav" class="skip-content"> <nav id="nav"> <ol cl ...

What is the relationship between font size adjustments and the dimensions of the surrounding parent div element?

I've come across an issue that involves having the following code snippet in the body of an HTML file: html, body { width: 99%; height: 99%; margin: 0px; overflow: hidden; } #container1 { display: flex; gap: 2%; width: 90%; heigh ...

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

Once the ajax jQuery is triggered, I hope to see an image loading for a brief moment of just 1

Can someone assist me with the following code snippet? <script type="text/javascript"> $(function () { $(".a").live("click", function () { var $this = $(this), ProductImageId = $this.data('ProductImageId'); ...

Utilizing CSS selectors to pinpoint specific elements on a webpage

As I continue to enhance my CSS skills, I stumbled upon a challenging puzzle that requires me to figure out how to select each individual image on a webpage using selectors. Here is the provided HTML code: <!DOCTYPE html> <html> <head> ...

Selecting an option from a dropdown menu and entering data into a text box

I am currently facing an issue with inserting a value using a text box. The process starts with the admin selecting a category, such as a cellphone brand, from a drop down list. Once the brand is chosen, they will input the cellphone model using a text bo ...

Repeated information displayed in modal pop-ups

HTML <a class="btn" data-popup-open="popup-1" href="#">More Details</a> <div class="popup" data-popup="popup-1"> <div class="popup-inner"> <h2>Unbelievable! Check this Out! (Popup #1)</h2> ...

There appears to be some lingering content in the JQuery Mobile slide-out dialog box

My jQuery mobile slide out dialog box is experiencing an issue. The first time the slide out occurs, a comment box appears where users can enter comments and then submit them, followed by a "THANK YOU" message. However, when the user closes the dialog box ...

Is there a way to transform an HTML table into an Excel file with several sheets?

Is there a way to transform multiple HTML tables into an Excel file with multiple worksheets? I need assistance with this task. You can find an example here function exportTablesToExcel() { var tableContent = "<table border='2px'>< ...