CODEWITHSUNDEEP
htmlcssmultiple-columns
Oliver Tappin
Oliver Tappin

Reputation: 2541

Simple column layout using CSS and HTML only

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!

Upvotes: 1

Views: 212

Answers (2)

Oliver Tappin
Oliver Tappin

Reputation: 2541

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);.

Upvotes: 0

Blender
Blender

Reputation: 298106

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/

Upvotes: 5

Related Questions