Css fixed column amount regardless of children count without FlexBox

Question

Basically, I want to replicate the col-6 (or col-x) behavior of Bootstrap without using FlexBox.

A div that all its children are paired and wrapped, and when once it removed, it rearranges itself.

For example, if I remove Child 2:

--------------------------------
| Child 1 with |               |
|  Very long   |    Child 2    |
|    Text      |               |
--------------------------------
|   Child 3    |    Child 4    |
--------------------------------

This should happen :

--------------------------------
| Child 1 with |               |
|  Very long   |    Child 3    |
|    Text      |               |
--------------------------------
|   Child 4    |
----------------

It's important that it works with elements of different heights!

I'm not sure what kind of code sample I can post here, I know how to do this using FlexBox but I can't use it as I'm using a PDF creating a library that doesn't fully support FlexBox, so I'm trying different approaches until I replicate what I need.

What have you tried so far? You can also just use Bootstrap 3, which doesn't include Flexbox — Helenesh, Feb 12 '19 at 12:21
@Helenesh well I tried using display:table and display:table-cell, but that doesn't wrap the elements — Mojimi, Feb 12 '19 at 12:23
either just make your inner elements inline-block or float them left and they should naturally line up line that — Pete, Feb 12 '19 at 12:30
@Pete I just tried that, but it didn't work with elements of different heights/lengths — Mojimi, Feb 12 '19 at 12:43
it would if you use inline block with vertical align bottom on them — Pete, Feb 12 '19 at 12:48
@Pete it did work! Except I had to set the width to 49% instead of 50%, did I miss anything? Mind posting a sample — Mojimi, Feb 12 '19 at 12:58
https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements — Pete, Feb 12 '19 at 13:05
@Pete thanks that did work, another minor issue is that "orphan" element (alone in a row) get centered instead of in the left as my sketch, is there a way to have a selector for these elements? Kinda like a `if odd number of children` selector — Mojimi, Feb 12 '19 at 13:29
just put text align left on parent - if you need the text inside each box centred, put the centring on the box, not the parent. It's not rocket science. And this is why you need to create a [mcve] so you don't end up asking fifty questions to what should be a very simple question — Pete, Feb 12 '19 at 13:42
Questions seeking debugging help ("**why isn't this code working?**") must include the desired behavior, a specific problem or error and the **shortest code necessary to reproduce it** in the question itself. See: How to create a [mcve]. — Asons, Feb 12 '19 at 22:06

score 2 · Answer 1 · answered Feb 12 '19 at 12:29

I would suggest using a non flexbox based framework like bootstrap 3 or skeleton. however if you just want what you have described in the question then you can just use display inline-block.

.box {
 height:50px;
 background: indianred;
 width:48%;
 display: inline-block;
}
.box1 {
 background: indianred;
}
.box2 {
 background: steelblue;
}
.box3 {
 background: coral;
}
.box4 {
 background: cadetblue;
}

<div class="box box1">BOX 1</div>
<div class="box box2">BOX 2</div>
<div class="box box3">BOX 3</div>
<div class="box box4">BOX 4</div>

<hr>

<div class="box box1">BOX 1</div>
<!-- <div class="box box2">BOX 2</div> -->
<div class="box box3">BOX 3</div>
<div class="box box4">BOX 4</div>

I know I didn't specify this, but this doesn't work if one box has a very long text — Mojimi, Feb 12 '19 at 12:37

Css fixed column amount regardless of children count without FlexBox

1 Answers1