Tips for aligning divs side by side with smaller divs stacked below them

Question

Tips for aligning divs side by side with smaller divs stacked below them

I have a collection of dynamically generated divs that act as panels for selecting different options. These divs can be categorized into two types: regular and short. The height of the regular divs is determined using JavaScript to match the height of the tallest one. If the height of the short div is less than half of the maximum height, it is set to half of that height; otherwise, it retains its full height.

My current goal (ideally utilizing CSS) is to arrange these items in a way that allows for placing one short div below another short div if there is adequate space available.

Below are some visual aids to help clarify the situation:

css html

Answer 1

Answer №1

It seems that achieving this layout purely with CSS is not possible: If you use clear: left for the small boxes, they will be displayed below all others. If you don't use it, they will be positioned next to each other.

One workaround I suggest is to manually group two small boxes into a separate div. Here's an example of how you can do this:

<html>
<head>
    <style type="text/css">
        div.large, div.small { width: 40px; margin: 5px; }
        div.large { height: 95px; background-color: blue; }
        div.small { height: 45px; background-color: red; }
        div.large, div.smallblock { float: left; }
    </style>
</head>
<body>
    <div class="large">1</div>
    <div class="large">2</div>
    <div class="smallblock">
        <div class="small">3</div>
        <div class="small">4</div>
    </div>
    <div class="smallblock">
        <div class="small">5</div>
        <div class="small">6</div>
    </div>
    <div class="large">7</div>
</body>
</html>

Answer 2

It seems that achieving this layout purely with CSS is not possible: If you use clear: left for the small boxes, they will be displayed below all others. If you don't use it, they will be positioned next to each other.

One workaround I suggest is to manually group two small boxes into a separate div. Here's an example of how you can do this:

<html>
<head>
    <style type="text/css">
        div.large, div.small { width: 40px; margin: 5px; }
        div.large { height: 95px; background-color: blue; }
        div.small { height: 45px; background-color: red; }
        div.large, div.smallblock { float: left; }
    </style>
</head>
<body>
    <div class="large">1</div>
    <div class="large">2</div>
    <div class="smallblock">
        <div class="small">3</div>
        <div class="small">4</div>
    </div>
    <div class="smallblock">
        <div class="small">5</div>
        <div class="small">6</div>
    </div>
    <div class="large">7</div>
</body>
</html>

Answer 3

Answer №2

Unfortunately, there isn't a universal pure CSS solution available.

To explore different techniques, you can refer to this previous answer:

CSS Floating Divs At Variable Heights

If server-side calculations are not an option and you cannot utilize position: relative /

position: absolute; top: ?px; left: ?px

, you may need to use JavaScript for positioning control.

A jQuery plugin like jQuery Masonry is often recommended as a reliable solution.

You can also consider using a vanilla JavaScript version called Vanilla Masonry.

For more information on this topic, feel free to check out these helpful resources:

Here are some demos that you may find useful:

Answer 4

Unfortunately, there isn't a universal pure CSS solution available.

To explore different techniques, you can refer to this previous answer:

CSS Floating Divs At Variable Heights

If server-side calculations are not an option and you cannot utilize position: relative /

position: absolute; top: ?px; left: ?px

, you may need to use JavaScript for positioning control.

A jQuery plugin like jQuery Masonry is often recommended as a reliable solution.

You can also consider using a vanilla JavaScript version called Vanilla Masonry.

For more information on this topic, feel free to check out these helpful resources:

Here are some demos that you may find useful:

Tips for aligning divs side by side with smaller divs stacked below them

Answer №1

Answer №2

Similar questions

The margin-left and margin-right in HTML CSS are not cooperating to center a div

How can you retrieve the value of a CSS file in Javascript and CSS?

What is the trick to incorporating nested tabs within tabs?

Typescript includes empty spaces in its duplicate-checking process

Struggling with applying mixins

A step-by-step guide on revealing a complete div upon selection

Masonry style attempted for posts but did not produce desired outcome

What is the correct way to write this unusual '<a>' tag markup using Pug language?

Tips for ensuring that divs resize to match the container while preserving their original proportions:

Choose the descendant element of the element that has a specific attribute

How is it possible to encounter a Javascript unexpected token ] error within an HTML code?

Tips for positioning a box on top of a map in a floating manner

When a specific item is selected from a drop-down menu, text boxes and drop-downs will dynamically appear and change

W3C validation issue: "Failure to immediately follow a start-tag with a null end-tag" and similar errors

Invoke a JavaScript function with arguments upon clicking on a hyperlink

Initiate a click on a radio button while also retaining the selected option when the page is

Unveiling the mystery of extracting information from a string post serialization

What causes the off-canvas menu to displace my fixed div when it is opened?

Unable to dial phone numbers when clicking 'Click to call' link on Android devices

The HTML select element fails to drop down over the THREE.js scene