how to top-align multiple blocks of text across multi-rows

Question

Imagine a web page that has a full-width content bin towards the top, but at the bottom divides into multiple columns AND rows, with each bin (one-column and one-row) having its own little blurb of content. The amount of content might vary, so that these bins might not all be the same height.

I would like to create a css type for the bin, maybe something like:

div.bin
{
float:left;
padding:1.0em;
box-sizing: border-box;
width: 25%; 
}

There would be a variable number of <div class="bin"> CONTENTS </div> elements in a row, inside some larger <div style="width:100%"> container.

The goal would be, if there are more than four of the bin elements, the first four would be displayed in a row, the next four in another row, etc., with no requirement that the number of bins be some multiple of four.

The problem I am having is that the second row does not get displayed neatly at a vertical position just below the longest of the previous four. Instead, if (say) the second one is extra long, the fifth one will wrap back, float left until it bumps into the descending piece of bin#2 and displays itself in column three, thereby screwing up the whole presentation.

I can solve this by placing them four at a time inside wrapper DIVs, but that cuts in to the flexibility I would like to have.

Ideally, I would like to be able to make the whole thing responsive by redefining the width property of the bin to 33%, 50%, and 100 % as the viewport gets smaller. To make this work, of course, the bin cannot be placed into subset container DIVs.

Any ideas?

A picture of the problem

When the fifth one wraps it bumps into the trailing edge of the first one before 4 that is longer than 4.

As you can see with 6 through 9, they display fine, after the top edge is properly determined.

So, the question is, how to force box 5 to display UNDER the bottom edge of the longest of boxes 1 through 4...

Note: the problem is not how to get box 5 specifically to wrap properly. It is how to get any box to wrap properly, even if you do not know which one is going to wrap (for example, if the width of the bins has changed from 25% to 33.33%, or to something else).

It is not EXACTLY the same question, but it is similar. In my case, I am trying to achieve (top alignment across grid elements) what the other question was trying to avoid. In either case, the solution can be achieved using some variation on display: flex. For my problem, the solution turned out to be setting the container attributes to display: flex; flex-wrap: wrap. Then I could responsively change the width of the div.bin element as the viewport got smaller to lower the column count. — Robert Robbins, Oct 28 '16 at 15:26

norcal johnny · Answer 1 · 2016-10-28T02:09:33.383

NOTE: I do not see a pic so this is somewhat a guess into what you want and eliminating white spaces as well.

Use a masonry class (you can name the class as you wish.) Result would be this using text.

HTML

<div class="masonry">
   <div class="item"><img src="example.com/1.jpg"></div>
   <div class="item"><img src="example.com/2.jpg"></div>
   <div class="item"><img src="example.com/3.jpg"></div>
   <div class="item"><img src="example.com/4.jpg"></div>
   <div class="item"><img src="example.com/5.jpg"></div>
   <div class="item"><img src="example.com/6.jpg"></div>
   <div class="item"><img src="example.com/7.jpg"></div>
   <div class="item"><img src="example.com/8.jpg"></div>
</div>

CSS

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

Responsive CSS

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

JSfiddle DEMO

score 0 · Answer 2 · answered Oct 28 '16 at 01:44

Or, you can use flex-box: https://jsfiddle.net/2t1bzjk9/

#container {
  background: black;
  display: flex;
  flex-wrap: wrap;
}
div.bin {
flex: 1 0 25%;
padding:1.0em;
box-sizing: border-box;
width: 25%; 
background: white;
  border: 1px solid red;
}

<div id="container">
  <div class="bin">
    <p>
    some content
    </p>
  </div>
    <div class="bin">
    <p>
    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content   
    </p>
  </div>
  <div class="bin">
    <p>
    some content
    </p>
  </div>
  <div class="bin">
    <p>
    some content
    </p>
  </div>
 <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div>
</div>

how to top-align multiple blocks of text across multi-rows

2 Answers2