I am attempting to create floating/stacking boxes on the right side of the page as long as there is available space. I am close to achieving my desired layout, but the DIVs keep getting wrapped over each other, causing the headings to be lost.
.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>
...
</body>
</html>
View this fiddle for a visual representation: https://jsfiddle.net/Omphaloskopie/py1hrpvs/
The wrapping of the boxes does not look good. How can I fix this issue?
Edit:
To clarify, I want the boxes tightly wrapped around their content without using a grid layout. The boxes should align themselves to the right and fill up space horizontally. If a box is too tall, vertical scrolling is acceptable. Where there is enough vertical space, smaller boxes should stack vertically. The bottom line should not be straight, resembling left-aligned text rotated by 90°.
Here is an example of the desired look: (The achieved look in the example uses predetermined box sizes and absolute positioning, which I am trying to avoid. There must be a simpler solution.)