Home/ Questions/Q 9138467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:15:37+00:00

In microsoft word you can make two columns in a document and when you

  • 0

In microsoft word you can make two columns in a document and when you reach the bottom of one column it automatically continues into the top of the other column beside it.
I was wondering if this behaviour is also possible in css?

When I google and search it I find plenty of making a two column webpage layout, but that is not what I want.
I want the textflow to continue automatically int othe other column.

so that if you have this:

<div class="twocolumns">lorem ipsum dolor est.........</div>

that you get

Lorem ipsum dolor sit amet,        ea commodo consequat.
consectetur adipisicing elit,      Duis aute irure dolor 
sed do eiusmod tempor incididunt   in reprehenderit in voluptate
ut labore et dolore magna aliqua.  velit esse cillum dolore
Ut enim ad minim veniam, quis      eu fugiat nulla pariatur.
nostrud exercitation ullamco 
laboris nisi ut aliquip ex

Is this even possible with css alone?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can absolutely do it with CSS3. Unfortunately I’m not sure how well IE handles this, but a shim or something might help with that.

    HTML

    <div class="twocolumns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mauris nec nisi tristique condimentum vitae sed orci. Vestibulum luctus hendrerit sem, ut sodales nibh rhoncus a. Mauris a diam mollis ante auctor aliquam. Sed cursus interdum nisl at condimentum. Cras gravida nulla sit amet nisi fringilla bibendum. Suspendisse blandit scelerisque arcu euismod facilisis. Sed ultrices tincidunt commodo. Phasellus sed justo libero. Donec venenatis sapien eu arcu feugiat vulputate. Praesent tortor mauris, tincidunt non venenatis sit amet, ultricies ac lacus. Praesent fermentum pharetra posuere. Quisque eget blandit lacus. Suspendisse eget diam justo. Donec eu urna nec metus consequat pellentesque id nec leo. Nam sodales sapien id tellus rhoncus pellentesque. Ut fringilla imperdiet rhoncus.</div>

    CSS

    .twocolumns {
 padding:10px;
  width:80%;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}

    jsFiddle

    • 0