13

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.

Charlie
  • 335
  • 1
  • 6
  • 11
  • What you do mean with "ave the text flow correctly"? There are several way to do this depending on, if your "C" elements are blocks or inline, if they are all the same size, if they should adjust each others sizes, etc. Give some more details... – RoToRa May 21 '10 at 08:26
  • Can you post what you want your markup to look like? It's not clear to me what C1, C2 etc are if they're not separate elements. – robertc May 22 '10 at 16:59

3 Answers3

12

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.

Anurag
  • 140,337
  • 36
  • 221
  • 257
7

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>
Darren Griffith
  • 3,290
  • 3
  • 28
  • 35
Bastiaan Linders
  • 1,861
  • 2
  • 13
  • 15
  • Thanks for the answer. Just to clarify, I want write the text within a single tag/element and have HTML5/CSS create the columns, and not explicitly place the text in each column. – Charlie May 21 '10 at 08:59
  • I suppose floating is your solution then :) – Bastiaan Linders May 21 '10 at 09:02
  • In your second solution, don't I still have to place the text explicitly within each div? What happens to overflow? – Charlie May 21 '10 at 09:04
  • I thought you just had a situation with 6 different "articles". You want to be able to add 1 continuously long text and still get that layout? If so, my solutions won't do ;) – Bastiaan Linders May 21 '10 at 09:22
  • Say you float: left, 3 divs are thus on the first line and the others start now from the 2nd. If the content of your 2nd div on the first line is larger then that of the 3rd the 4th div will get blocked by it. :) – srcspider Jan 18 '11 at 15:05
  • It's bad to use prefix version only. There should always be a non-prefix version of every rule! – m93a May 16 '13 at 13:07
1

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

Darren Griffith
  • 3,290
  • 3
  • 28
  • 35
sobiech
  • 11
  • 1