Forum Moderators: not2easy
Is there a way to make two columns (maybe of a fixed height) so that when text in the left column fills up it overflows into the right column? ..Kind of like a news paper. Here's the basic idea:
¦ Here is a ¦ column two ¦
¦ long ¦ when column ¦
¦ sentence ¦ one fills ¦
¦ that spills ¦ up. ¦
¦ over to ¦ ¦Of course, such a thing is possible using two divs and breaking up the sentence:
<div>Here is a long sentence that spills over to</div>
<div>column two when column one fills up.</div>and CSS code to make the divs into columns, but for different user agents and different font sizes, the break in the sentence needs to be dynamic so that where column 2 starts in the sentence can be different for different settings. Basically, I was wondering if there was some way to do:
<div id="twocols">Here is a long sentence that spills over to column two when column one fills up.</div>with some sort of CSS like this:
#twocols {height: 40px; columns: 50% 50%;}where "columns: 50% 50%" tells it to do two columns each taking up 50% of the page. or something remotely similar...?
#twocolumns { -moz-column-count: 2; }Obviously you'd drop the -moz- vendor prefix when a final version is released. You'd also want a bit of a gap between columns probably. You can do this with the column-gap rule:
#twocolumns {
-moz-column-count: 2;
-moz-column-gap: 10px;
}Probably the best bet is to have a read over the specs [w3.org] to see what's possible. Currently column-rule and column-span aren't implemented in Gecko which is a shame but hey.
Now, obviously that only works in very recent Mozillas. It's possible to use scripting to get the same result but I only know of one site that's done this (International Herald Tribune - sample story [iht.com]) and I wouldn't have the foggiest where to start with coding that.
