1

I am trying to have boxes that float/stack themselves off to the right as long as there is room. I came pretty close to what I want, but the DIVs keep getting wrapped over, so that the items lose their heading. 

    .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>
    <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>

Here is a fiddle: https://jsfiddle.net/Omphaloskopie/py1hrpvs/

As you can see the boxes wrap very ugly. How can I prevent that?

Edit:

To clarify what I am looking for: I am trying to not have grid, but boxes tightly wrapped around the content. The boxes should not be divided / wrap at all. Boxes should align themselves preferably to the right to fill up the page, but if single boxes are to tall vertical scrolling would be okay. Where there is enough vertical space, more smaller boxes should align on top of each other. The page would not have a straight bottom line, the bottom would look like left-aligned text flipped by 90°.

Basically it should look like this for example: http://www.ballajack.com/wp-content/uploads/2012/01/bookolio-e1327663255869.jpg (this look is achieved by premeditating box-sizes and absolute positioning. I am trying to avoid that. There has to be an easier way.)

Omphaloskopie
  • 1,952
  • 1
  • 14
  • 24
  • 1
    I'm not clear on what "wrap very ugly" means. Creating a list with lots of `br` tags isn't idiomatic HTML for this. What is your desired behavior? – jmargolisvt Sep 18 '18 at 02:07
  • @jmargolisvt the
    are stand-ins for links. one per visible line. the boxes are not equally sized.     – Omphaloskopie Sep 18 '18 at 02:21
  • 1
    Can you use flex box? – Smokey Dawson Sep 18 '18 at 02:30
  • @jmargolisvt desired behaviour is to have them not wrap at all and continue with the "overflowing box" in the next column. – Omphaloskopie Sep 18 '18 at 02:30
  • @SmokeyDawson As in "am I restricted in anyway?" Yes I can use flex-box. As in "do you know how to use flex-box to solve this?" No, I don't. – Omphaloskopie Sep 18 '18 at 02:38
  • 1
    No I'm just wondering if you can use flexbox in your project, what is your desired outcome? – Smokey Dawson Sep 18 '18 at 02:39
  • 1
    I tweaked yours slightly (also changed the first couple of data blocks to use similary-styled ul and li elements, but not strictly relevant). Using display:inline-block helped: https://jsfiddle.net/3tu56r1y/ – Gus Sep 18 '18 at 03:08
  • 1
    @Gus This is very nice, too! Thanks a lot! This seems like what I was going for in the first place, but could quite get it to work :) – Omphaloskopie Sep 18 '18 at 03:13

2 Answers2

1

I'm not sure what your desired outcome was but from the sounds of it, you can do this...

.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
      <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>

here is a fiddle https://jsfiddle.net/py1hrpvs/71/

or...

a way to do this without flexbox is and without specifying a max-height

.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;
}
Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
  • Thank you for the attempt! I am trying to avoid the whitespace in the boxes. So that there would not be this "Grid-Look". I will try to specify what I want in the Question. – Omphaloskopie Sep 18 '18 at 02:46
  • 1
    You could try this see updated answer (https://jsfiddle.net/py1hrpvs/79/) and expirement with the height of the container I have set it to 800px – Smokey Dawson Sep 18 '18 at 02:52
  • 1
    you can see more examples of what your trying to do here.. http://w3bits.com/flexbox-masonry/ – Smokey Dawson Sep 18 '18 at 02:54
  • Yep thats pretty much it. I have to specify a height? It can't just fill up the viewport and overflow vertically if needed? – Omphaloskopie Sep 18 '18 at 03:04
  • 1
    I have updated my answer, this will do what you want without specifying a max-height – Smokey Dawson Sep 18 '18 at 03:04
1

The nature of your lists have different heights. If you use column and filled all spaces, it will automatically cuted the bottom list as it have to filled all blank spaces.

Even if you keep each list height intact, it will also leave a blank space in the bottom as the last list will go to the top.

So in short you can't fill all blank spaces if you don't have same height.

The closest approach you can do is to use same height to all list, either use 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>
Drunken M
  • 2,013
  • 2
  • 11
  • 18
  • I meant the the blank spaces within the boxes. That there will be space outside of them is a given. Thanks for the effort, though! – Omphaloskopie Sep 18 '18 at 03:16