To find a meaningful title was difficult for me.
I try to force my HTML document to have same text flow behavior like typical word processors have.
Please take a look at the following container flow:
1 2 3
|-------------|
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
|-------------|
4 5 (6)
|-------------|
| ~~~ ~~~ |
| ~~~ ~~~ |
| ~~~ ~~~ |
| ~~~ ~~~ |
| ~~~ |
| ~~~ |
| ~~~ |
| ~~~ |
|-------------|
The three tildes mean a rendered container element and the numbers show the order of content-flow.
The following HTML/CSS code was a first try with a very unsatisfying result.
html {
margin: 0;
background-color: lightblue;
}
body {
display: inline-block;
margin: 0;
background-color: coral;
}
p {
width: 33%;
}
.din-a7 {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 74mm;
height: 105mm;
}
.print-margin-10mm {
padding: 10mm;
}<div class="din-a7 print-margin-10mm two-column-text-flow">
<p>01 content</p>
<p>02 content</p>
<p>03 content</p>
<p>04 content</p>
<p>05 content</p>
<p>06 content</p>
<p>07 content</p>
<p>08 content</p>
<p>09 content</p>
<p>10 content</p>
<p>11 content</p>
<p>12 content</p>
<p>13 content</p>
<p>14 content</p>
<p>15 content</p>
<p>16 content</p>
<p>17 content</p>
<p>18 content</p>
<p>19 content</p>
<p>20 content</p>
<p>21 content</p>
<p>22 content</p>
<p>23 content</p>
<p>24 content</p>
<p>25 content</p>
<p>26 content</p>
<p>27 content</p>
<p>28 content</p>
<p>29 content</p>
<p>30 content</p>
<p>31 content</p>
<p>32 content</p>
<p>33 content</p>
<p>34 content</p>
<p>35 content</p>
<p>36 content</p>
<p>37 content</p>
</div>I have tried to use column-count but it works only with simple text instead of containers and also the wrap to the next "page" doesn't work.
Is this possible with simple HTML/CSS anyway?
