0

I'm trying to create a kind of staggered text boxes lay-out (see attached picture). So far I'm not succeeding, I hope you guys are able to help. Currently the second row is not floating to the complete left, but stuck at the 2nd column level.

Thx

Staggered lay-out

[1]: https://i.stack.imgur.com/jZyuY.png

HTML

<section class= contentpage>
    <p> 1st text block </p>
    <p> 2nd text block </p>
    <p> 3rdt text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
</section>

CSS

.contentpage p {
display: block;
float:left;
width: 31%;
margin: 15px
}
Bram Lefever
  • 1
  • 1
  • So you want to arrange a flat hierarchy of paragraph elements into 3 columns? Can you update your layout mockup with numbers, so it's clearer how they're supposed to be arranged relative to how they appear in the markup? – Serlite Jan 31 '17 at 20:22
  • Serlite, lay-out updated. I want them to start a new row on the left and float up until they reach the block above in the column. – Bram Lefever Jan 31 '17 at 20:53

0 Answers0