Column layout in HTML(5)/CSS

Question

Is there a way in HTML5/CSS to have the columns layed out as shown below, and still have the text flow correctly?

######  ######
# C1 #  # C2 #
#    #  #    #
######  ######

######  ######
# C3 #  # C4 #
#    #  #    #
######  ######

######  ######
# C5 #  # C6 #
#    #  #    #
######  ######

Just to clarify - I want to be able to write all the text within a single element and have the CSS create the columns.

Answer 1

When using HTML5 i suppose you allow CSS3 two.

<style>
  .columns{
    -webkit-column-count: 2;
    -webkit-column-rule: 0px;
    -moz-column-count: 2;
    -moz-column-rule: 0px;
  }
</style>

<div class="containter">
  <div class="columns">
    <div>C1</div>
    <div>C2</div>
  </div>
  <div class="columns">
    <div>C3</div>
    <div>C4</div>
  </div>
  <div class="columns">
    <div>C5</div>
    <div>C6</div>
  </div>
</div>
...

But to be honest, i think you are better off by just floating 6 divs in a box twice the width of the divs:

<style>
  .containter{
    width: 300px;
  }
  .containter div{
    width: 150px;
    float: left;
  }
</style>

<div class="containter">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 2

Although this uses one single element, but the breaks must be manually defined.

Use the column-span property and use an element such as <br /> to define the vertical breakpoints. The content will look and render approximately as:

<p>
  CSS3 multi
  <br/>
  columns are
  <br />
  just awesome.
</p>

CSS3    | multi
-----------------
columns | are
-----------------
just    | awesome

CSS looks like:

p {
    column-count: 2;
    column-rule: 1em solid black;
}

br {
    column-span: all;
}

Add browser specific prefixes (-webkit, -moz) accordingly. column-span may not be supported by any browsers as of today. See this article for details. Here's my feeble attempt that didn't work on Chrome.