How can I stop columned-DIVs from wrapping on the webpage?

I am attempting to create floating/stacking boxes on the right side of the page as long as there is available space. I am close to achieving my desired layout, but the DIVs keep getting wrapped over each other, causing the headings to be lost.


            .box{
                height: additive;
                width: 222px;
                margin: 8px;
                background-color: #fff;
                border-radius: 3px;
                padding: 10px;
                font-size: 14px;
                box-shadow: 4px 4px #666;
                word-break: keep-all;
                }
                body {
                    padding: 20px;
                    font-family: Helvetica;
                    background-color: #20262e;
                    -webkit-column-width: 202px;
                    -moz-column-width: 202px;
                    -column-width: 202px;
                    -ms-column-width: 202px;
                    column-width: 202px;
                }
            
        
<html>

        <head>
        </head>

        <body>
            <div class="box">
            <h3>
                eins
            </h3>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
            <br/>11
            <br/>12
            <br/>13
            <br/>14
            <br/>15
            <br/>16
            <br/>17
            <br/>18
            <br/>19
            <br/>20
            <br/>
            </div>
            <div class="box">
            <h3>
                zwei
            </h3>1
            <br/>2
            <br/>3
            <br/>4
            <br/>
            </div>
            ...
        </body>

        </html>
        
        

View this fiddle for a visual representation: https://jsfiddle.net/Omphaloskopie/py1hrpvs/

The wrapping of the boxes does not look good. How can I fix this issue?

Edit:

To clarify, I want the boxes tightly wrapped around their content without using a grid layout. The boxes should align themselves to the right and fill up space horizontally. If a box is too tall, vertical scrolling is acceptable. Where there is enough vertical space, smaller boxes should stack vertically. The bottom line should not be straight, resembling left-aligned text rotated by 90°.

Here is an example of the desired look: (The achieved look in the example uses predetermined box sizes and absolute positioning, which I am trying to avoid. There must be a simpler solution.)

Answer №1

I'm uncertain about the end goal you had in mind, but it seems like you can achieve it by following these steps...

.box{
  height: auto;
  width: 222px;
  margin: 8px;

  background-color: #fff;
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 4px 4px #666;
  word-break: keep-all;
}

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px;
}
<html>

  <head>
  </head>

  <body>
    <div class="box">
      <h3>
        eins
      </h3>1
      <br/>2
      ...

For a live example, check out this fiddle https://jsfiddle.net/py1hrpvs/71/

Alternatively, you could achieve a similar layout without using flexbox and not setting a maximum height with the following code:

.box{
  height: auto;
  width: 222px;
  margin: 8px;
  background-color: #fff;
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 4px 4px #666;
  word-break: keep-all;
  display: inline-block;
}

body {
 padding: 20px;
 font-family: Helvetica;
 background-color: #20262e;
 column-count: 4;
 column-gap: 1em;
}

Answer №2

Your lists have varying heights which can result in gaps when using the column property to fill spaces. The bottom list will be cut off if all spaces are filled, and leaving each list at its original height may still leave a blank space at the end due to how they align.

In brief, achieving a gap-free layout is difficult without uniform heights across all lists. The closest solution possible is to make all lists the same height, whether by utilizing column or float.

.box{
    /*height: additive;*/
    width: 202px;
    margin: 8px;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px;
    font-size: 14px;
    box-shadow: 4px 4px #666;
    word-break: keep-all;
    min-height:400px;
    max-height:400px;
    float: left;
    }
    body {
    padding: 20px;
    font-family: Helvetica;
    background-color: #20262e;
    width:100%;
    /*
    -webkit-column-width: 202px;
    -moz-column-width: 202px;
    -column-width: 202px;
    -ms-column-width: 202px;
    column-width: 202px;
    */
    }
<html>

  <head>
  </head>

  <body>
    <div class="box">
      <h3>
        eins
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>18
      <br/>19
      <br/>20
      <br/>
    </div>
    <div class="box">
      <h3>
        zwei
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>
    </div>
    <div class="box">
      <h3>
        drei
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>
    </div>
    <div class="box">
      <h3>
        vier
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>
    </div>
    <div class="box">
      <h3>
        fünf
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>18
      <br/>19
      <br/>20
      <br/>
    </div>
    <div class="box">
      <h3>
        sechs
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>
    </div>
    <div class="box">
      <h3>
        sieben
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>
    </div>
    <div class="box">
      <h3>
        acht
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>
    </div>
    <div class="box">
      <h3>
        neun
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>
    </div>
  </body>

</html>

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

Using the ol tag in Google Chrome browser

I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...

What steps should be taken to create a two-column table from a given list of items?

I am trying to display a list of words in two columns, one word after another from left to right. Here is the desired table structure: <table id="wordTable"> <tr> <td>ac </td> <td>bd </td> </tr> ...

Search for and swap out a parameter value within an array located in a div using jQuery

A query I have is regarding a div where I am aiming to update the value of a parameter within an array. The PHP code I am using to create the HTML is as follows: <div id="data1<?php echo $data['id']; ?>" data-url="<?php echo 'p ...

What is the best method for obtaining a modified image (img) source (src) on the server side?

Having some trouble with a concept in ASP.Net that's causing me quite the headache. I am fairly new to ASP.Net and struggling with something that seems much easier in PHP. I created an img element with an empty src attribute : <img runat="server" ...

While using Nav, it is necessary to adjust the height of the drop-down menu to accommodate the content when the sub-menu

My dropdown menu has multiple submenus, and I'm facing an issue where the submenu content overlaps the container when opened. I want the container to scale to the height of the submenu content when opening, and then reduce back when closing the submen ...

Adjust the hue of the SVG sprite

I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...

If a quote character is detected in a string, color the line red

My goal is to highlight each line from a string in red if it contains the ">" character. I am applying this logic to a database query result, and while it's successful, I'm encountering an issue where an HTML line break is inserted after each ...

What are the steps to creating an API for a web application?

I have been tasked with creating an API for my web application that will utilize another website's authentication system. While I have a basic understanding of JavaScript, PHP, and HTML, I need guidance on how to proceed with building the API. Here i ...

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

Is there a way to retrieve values from a different menu without the need to refresh the page?

Whenever a radio button is clicked on a form, a popup menu is displayed. The popup menu is implemented using the Bootstrap module. However, there is an issue where selecting an option from the popup menu causes the form to reset, resulting in the loss of ...

How to retrieve a DOM element using Aurelia framework

When it comes to accessing a DOM element in Aurelia, what are the best practices to follow for different use cases? Currently, I have two scenarios in my Aurelia project: Firstly, within the template, there is a form that I need to access from the view-mo ...

Embedding a countdown timer in basic HTML code

Attempting to embed the following into an HTML website: The issue I am facing is that when I run it, the timer does not appear. However, when I run it in fsFiddle, I do see the countdown timer. What could be causing this problem? <!DOCTYPE html> & ...

A guide on how to perfectly center a <ul> element on a webpage

After creating a ul element, I have customized the html and css for my navigation bar: Html: <ul id="list-nav"> <li><a href="Marsrutas.html">Item1</a> </li> <li><a href="Nuotraukos.html">Item2</a& ...

Alerts during script execution

As I execute the script, I encounter the following warnings: Notice: Undefined variable: varName in C:\wamp\www\dash\index.php on line 38 Notice: Undefined variable: varMsg in C:\wamp\www\dash\index.php on line 38 N ...

What is the process for integrating Socket io into an external JavaScript file that is connected to an HTML file?

Currently, I am utilizing node js, socket io, and express to develop a multiplayer web game. To begin, the server initiates and listens on port 2000. Upon visiting localhost:2000, the file lobby.html is transmitted using: //app.js const express = require ...

Issue with arranging cards in a grid when utilizing v-for alongside bootstrap

Just starting out with vuejs and attempting to create a grid by looping through objects using bootstrap classes. However, I'm running into an issue where the cards are not forming a grid as expected when utilizing the col classes. Below is the code f ...

Tips for waiting on image loading in canvas

My challenge involves interacting with the image loaded on a canvas. However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests. Using driver.sleep() is not a reliable solution. Here is ...

The reason why setting height to 0 is ineffective in a CSS definition

Within my current project, I am utilizing vue.js 2 and have implemented an img component. Below is the code for this component: <template> <div class="banner"> <img class="banner-img" :src="bannerImg"/> </div> </template> ...

Bootstrap CSS: arranging columns for mobile devices

UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design o ...

What is the best way to embed a video and playlist onto a webpage using HTML5?

After switching from the flash-based JWPlayer 4 to JWPlayer 5 with HTML5 support, I noticed that while the player degrades gracefully on mobile devices without Flash but with HTML5 support, it breaks when the playlist option is enabled. Can someone please ...