Simple column layout using CSS and HTML only

Question

This may seem a little more complex than you first thought when clicking on this question.

I'm looking to create a really simple 2 column layout that can hold text. The issue is, the text is being imported via a Content Management System so this may be changed. The idea is to have a tag that can carry on the content on another column when it has used up all of it's space.

<p>Content goes here ... for quite a while ... lorum ipsum would be better.</p>

|-------------|  |-------------|
| Content     |  | while ...   |
| goes here   |  | lorum ipsum |
| ... for     |  | would be    |
| quite a     |  | better.     |
|-------------|  |-------------|

So this rules out the float left/right feature as it contains two different columns when essentially, it needs to be one. Just split.

I have thought of using PHP's strlen function to count the characters but as we all know, in different fonts, i is smaller than w meaning that the actual character count will not be at all in relation to the height of the content. And no, I cannot use a fixed width font. I have a feeling this will be the last resort but I hate giving up easily.

Any suggestions or ideas would be a great help. Thanks!

Blender · Accepted Answer · 2012-09-19 22:10:29Z

5

What you're describing has already been implemented in CSS3 through the column-count property:

CSS:

p {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
}

Demo: http://jsfiddle.net/WDgsv/

If you'd like to support IE as well, use a JS polyfill: http://www.csscripting.com/css-multi-column/

answered Sep 19, 2012 at 22:10

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oliver Tappin Over a year ago

Ditto. This is genius. I don't know why this wasn't invented in the very beginning.

Oliver Tappin · Accepted Answer · 2012-09-21 22:41:16Z

0

For those of you looking for a different solution, (and the unfortunate solution I used due to IE being an ABSOLUTE pain), I created this neat bit of code:

<? $array_content = explode("</p>", $page_content);
$i = 0;
foreach($array_content as $paragraph) {
  echo $paragraph;
  if($i == (round(count($array_content)/2, 0, PHP_ROUND_HALF_DOWN))-1) {
    echo "</div><div class=\"column\">";
  }
  $i++;
}?>

Works great for sentences too, just change your needle to a full stop: explode(".", $page_content);.

answered Sep 21, 2012 at 22:41

Oliver Tappin

2,5611 gold badge25 silver badges43 bronze badges

Collectives™ on Stack Overflow

Simple column layout using CSS and HTML only

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related