Utilize various CSS styles for text wrapping

I'm struggling to figure out where to begin with this problem. My goal is to create a three-column row that can wrap below each other if they cannot fit horizontally. The height of the row should adjust to accommodate the items while maintaining a fixed height when all cells are in line. If the row is too large for the contents, the cells should be centered vertically. Here is an example layout:

[           ] [ Big     ] [           ]
[  Content1 ] [         ] [ Content2  ]
[           ] [ Content ] [           ]

The layout should then wrap as follows:

[           ] [ Big     ]
[  Content1 ] [         ] 
[           ] [ Content ]
      [ Content2  ]

And finally:

[  Content1 ] 
 [ Big     ]
 [         ] 
 [ Content ]
[ Content2  ]

I am having trouble determining how to adjust the height of the cells based on their content and the content of their neighbors. One idea I have is to use JavaScript to check the offsetHeight to see if they are on the same "row" and adjust the height accordingly, but it feels cumbersome. Do you have any better suggestions?

Thank you!

javascriptcsshtml

Answer №1

Does this look right to you?

.row {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
}

.row div {
    border: 1px solid;
    margin: .5em;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

p {
    margin: .5em;
}
<div class="row">
    <div>
        <p>Content 1</p>
    </div>
    <div>
        <p>Big</p>
        <p>Content</p>
    </div>
    <div>
        <p>Content 1</p>
    </div>
</div>

(check out this jsfiddle link)

Answer №2

To achieve the desired effect, apply the CSS property display:inline-block to all the parent div elements. This will cause each div's height to adjust to the tallest one and wrap around as needed.

Answer №3

Feel free to utilize the following code snippet for your project:

.custom-box {

    display: inline-flex;
    justify-content: center;
    max-width: (desired width);
    max-height: (desired height);
    width: 100%;
    height: 100%;
    margin: auto;

}

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

Flexbox properties are being ignored by input fields

Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...

htmlcss

What steps are involved in developing an Angular library wrapper for a pre-existing Javascript library?

Imagine having a vanilla Javascript library that is commonly used on websites without any frameworks. How can you create an Angular library that can be easily installed via npm to seamlessly integrate the library into an Angular application? The process o ...

javascriptangularnpmangular-moduleangular-library

Attempting to include a new choice on a drop-down menu and ensure its visibility within the drop-down menu

On my journey into the world of web development, I am facing a challenge with adding an option to a dropdown list. Despite pressing the add button to insert "Pasta" as a new option, it is not showing up in the list immediately. However, selecting all optio ...

javascriptjquery

White border appears when hovering over MUI TextField

I've been troubleshooting this issue for what seems like an eternity. I've combed through Chrome's inspect tool, searching for any hover styles on the fieldset element, but to no avail. Here's my dilemma... I simply want a basic outline ...

javascriptcssreactjsmaterial-ui

How to center the navigation text on a WordPress website within the header.php file

Check out my website at I'm looking to center the navigation menu under the image. I've attempted multiple methods but can't seem to figure it out. Here's a snippet from the header.php file: <center><img src="http ...

csswordpresscenter

What makes the ng-file-upload Upload service so special?

Why do I need to use the Upload service with ng-file-upload in this specific way? Upload.upload({ url: '/postMyFormHere', data: { fileToUpload: model.file, someField1: model.field1, someField2: model.field2, ...

javascriptangularjsexpressmulterng-file-upload

Expanding the background color of a Div within a Grid System

Note: Utilizing the skeleton grid system. I'm trying to expand the background color of a specific div beyond the 960px container, but I'm facing some difficulties. Any ideas? Current: Desired outcome: HTML: <!DOCTYPE html> <!--[if l ...

csshtmlgridskeleton-css-boilerplate

In Backbone.js, specialized events are dispatched to cater to unique needs

In search of a sleek JavaScript animation to have some balls gracefully moving within a canvas, I aim to implement collision detection using custom events managed through Backbone.js rather than resorting to an intricate nested loop to monitor interactions ...

javascriptbackbone.jscollision-detectionbackbone-events

Solution for Organizing Tables

I've sourced data from various JSON API links and displayed it in a table. Currently, my code looks like this: <script src="js/1.js"></script> <script src="js/2.js"></script> Above this code is the table structure with <t ...

javascriptjqueryjsonsorting

Creating a blurred background effect when a React portal is presented

I have implemented React portals to display a modal popup after the form is submitted. However, I am facing an issue with blurring only the background while showing the modal, similar to what is shown in picture 2. Initially, I tried using document.body.st ...

javascripthtmlcssreactjsmodal-dialog

I'm searching for the HTML5 specifications and information on which browsers support specific features. Can you point me in the right direction

Where can I locate the HTML5 specifications for Internet Explorer, Opera, Firefox, and Google Chrome browsers? ...

htmlbrowser

Automatically change and submit an <input> value using jQuery

I have been working on a prototype to enable users to access all the data associated with a visualization. The idea is that they would click on a specific point, triggering a modal to appear, and within that modal, a table would dynamically filter based on ...

javascriptjquerybootstrap-4datatables-1.10

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

cssinternet-explorer-7css-frameworks

Troubleshooting challenges arise with Bootstrap's button group spacing issue

I am encountering spacing issues with the markup provided below. <h2>Profitability Report</h2> <form method="post"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-toggle ...

htmlcsstwitter-bootstrapbootstrap-4

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

After much contemplation and experimentation, I have been grappling with the idea of creating a bookmarklet that displays a header when clicked on any webpage. This header will contain a small form that submits its contents to a server before disappearing. ...

javascriptjqueryhtmliframebookmarklet

Encountered an error in Discord.js: Undefined properties unable to be read (execute)

Here is the code snippet from my main file: const { Client, IntentsBitField, Collection, intents, SlashCommandBuilder } = require('discord.js') const { TOKEN, PREFIX } = require('./config.json') const fs = require('fs'); const ...

javascriptnode.jsdiscorddiscord.jstypeerror

What is the best way to prioritize loading JSON models first in three.js and declare a variable before initializing?

I am looking to efficiently load multiple JSON models and store them in global variables for easy access. This will streamline tasks like copying, translating, and more without the need to reload a model each time. After trying various methods, I have not ...

javascriptjsoncallbackthree.jsloader

The line directly following the first line within the <li> element is located in the same position

I need help with customizing the bullet background-image for an <li> element. I want the text in the bullet to be displayed outside the marker using the CSS property list-item-position: outside. However, my current implementation doesn't seem to ...

htmlcssflexbox

Develop a personalized component featuring various sub-categories

Currently, I am in the process of implementing a data-table element using custom elements (web components). Each row in the table can contain different types of cells such as text, number, date, etc. For example: <my-table> <my-table-cell-te ...

htmlcssdomweb-componentcustom-element

The combination of Node.js and a Telegram bot

I am trying to utilize a telegram bot to access a specific route on a website. Within the website's routes.js file, I have: app.get('/api/getalert', getAlert); and var getAlert = function(req, res) { var id = req.query.id; ...

javascriptnode.jstelegram-bot