How to make inline divs wrap to the next line once a set number of divs have been displayed

I have a main div containing multiple smaller square divs, set up like this:

<div class="container">

    <div class="little-square"></div>
    <div class="little-square"></div>
    <div class="little-square"></div>

</div>

These little-square divs are dynamically generated using handlebars template. I want to limit each line in the container div to hold a maximum of four little-square divs. For example:

<div class="container">

        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>

    </div>

In this scenario, there should be four little-squares on the first line and two on the second. I am considering using JavaScript to add a line break after every fourth div, but not sure if that is the best approach. Any suggestions on how to achieve this effect? What factors should I consider when implementing this? (I'm new to CSS so any help is appreciated).

Answer №1

If you're looking for a workaround, one possible solution is to use display: inline and content: "\00000a", along with white-space: pre.

.little-square {
  background: black;
  margin: 10px;
  display: inline;
  padding: 15px 25px;
  line-height: 65px;
}
.little-square:nth-child(4n):after {
  content: "\00000a";
  white-space: pre;
}
<div class="container">
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
</div>

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

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

Generating a JSON file using JavaScript

Currently, I am attempting to create a JSON file through JavaScript. Since I haven't found the appropriate code yet, I am experimenting with creating a text file instead. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html&g ...

How to style multiple tags using CSS

Is there a way to style specific tags in CSS? <style type="text/css"> [attribute*="test"] { background-color: red; } </style> However, this method does not seem to work for the following tags: <test-1> </test-1> <t ...

Tips for positioning an image, text, and button horizontally without resorting to tables

Does anyone know how to align a movie poster image, description text, and add to cart button on the same line? The text must be centered aligned without wrapping around the button or image, just like in this example. https://i.sstatic.net/yQaCl.png Curre ...

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

Preventing unclickable Bootstrap checkboxes with identical IDs

I have a checkbox setup like this <div class="form-group"> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="machin ...

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

Is there a way to encase numerous <tbody> elements together?

My table design has specific css requirements where I am using multiple <tbody> tags. It looks like this: Example with multiple tbody tags However, I also need a wrapper for the multiple tbody tags (similar to a common tbody parent) that can be scr ...

Attaching a click event to an input field

Seeking to serve html files from the server without relying on template engines. Below is the script used to start the server. // script.js const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(expr ...

"Implementing interactive arrow buttons in a horizontal navigation bar using HTML, CSS, and JavaScript

Seeking advice on creating a horizontal navigation bar with arrow buttons at the sides, such as the one shown below. Despite extensive research, I have not found the exact solution I am looking for. This will be implemented in my Vue.js project. |<| P ...

Using the <audio> tag in HTML5 on Android devices

Exploring discussions on Android's support for the <audio> tag has been enlightening. Despite attempts on a Nexus One running Android Froyo 2.2, it seems playing audio remains elusive. As indicated by www.html5test.com, while the tag is support ...

Nested div within another div, shifting position relative to scrolling (React)

My goal is to create a unique effect where an object falls from the sky as the user scrolls down the page. The concept involves having the object div remain stationary in the center of its parent container, positioned 50 pixels from the top. However, when ...

Importance of prioritizing CSS files on a webpage with multiple stylesheets

Utilizing various CSS files has helped me organize my code, but it has also introduced some styling priority conflicts where certain codes overwrite others. I am now exploring ways to prioritize the CSS files to ensure that high-priority files are not ove ...

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

Using Ajax for submitting forms with jquery and html techniques

I am having an issue with my form submission page. I need to call a function at the time of form submission using AJAX. The form submission should occur or not based on certain conditions in the AJAX response. Below is the code I have, but it seems to be n ...

css: Aligning fonts horizontally when they have varying sizes

First time asking a question on this platform! I'm attempting to achieve a "pixel perfect" horizontal alignment of two lines of text, with each line having a different font size. <style type="text/css"> * { font-family: sans-serif;} ...

The functionality of the vue2-timepicker package seems to be malfunctioning in vue.js

I am utilizing the vue2-timepicker JavaScript package. npm install vue2-timepicker --save Following that, I import the CSS and datetimepicker component file from node_modules into my main.js file // import the CSS file import 'vue2-timepicker/dist ...

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: https://i.sstatic.net/foUiy.png I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a b ...

Accumulation of style from various directives in AngularJS on a single element

Currently, I am working on developing a component framework and find myself in need of a method to apply styles from multiple directives to an element in a way that they can accumulate. The priority of the styles should be determined by the directive creat ...

Troubleshooting IE's alignment issue on HTML pages without DTD validation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > <body> <div id="container"> <div id="menu"> <ul> <li><a > ...