0

I'm trying to build a multi column section in a website using CSS3 column-count property, the desired output is this:

enter image description here

I made the image using and old divscheme with floats and margins, however I'm trying to understand how can I do the same with CSS3.

So far a managed to make the following code:

<div id="target">   
    <p>
        <h2>Title 1</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <h2>Title 2</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <h2>Title 3</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <h2>Title 4</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>

</div>



div#target p {
    column-count: 4;
    -webkit-column-count:4;
    -moz-column-count:4;
    column-gap:30px;
    -moz-column-gap:30px;
    -webkit-column-gap:30px;

}

The code produced the following output:

enter image description here

How can I replace the initial objective? And is in Title 3 the content is much bigger, how can I tell the browser to make a new column at every <h1> elements it founds (or maybe other invisible marker)?

Thank you.

1 Answer 1

0

I managed to fix this by:

  1. Remove the <p> right after the <div>;
  2. Wrap column content into paragraphs;
  3. Add the following CSS:
div#target p {
  column-break-after: always;
  -webkit-column-break-after: always;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.