Column layout in HTML(5)/CSS

Is there a way in HT开发者_开发知识库ML5/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.

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.

If you are using HTML5, then I assume you are OK using CSS3 too:

<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>

For NO CSS3 solution use jQuery plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/

Example: http://welcome.totheinter.net/autocolumn/sample1.html

It's working for IE6+, FF2+, safari, chrome, opera :)