|
|
Posted by Ben C on 10/05/06 13:36
On 2006-10-05, David Segall <david@address.invalid> wrote:
> To cater for the increasingly drastic variation in screen widths I
> decided to follow the usual printed page solution and display the text
> in columns. I found the <multicol> tag but it only works in Netscape.
> How can I get text to flow between a fixed number of columns?
You can use a series of left floats with usually percentage widths on
them, or a table, or absolute positioning.
> For (a lot of) extra credit, how can I make the number of columns
> depend on the actual displayed width? I have no objection to using
> Javascript or even some simple server side processing.
You can use document.getComputedStyle() to get the width (and height) of
the container and then write a bit of JS to change the number of table
cells or floats.
A harder problem though is that whichever approach you use, you will
have to break the text up into columns yourself.
i.e.
<div class="col1">
blah blah
</div>
<div class="col2">
blah blah
</div>
The structure here defines where column 1 ends and column 2 starts.
Ideally you'd like the text to flow into column 2 automatically when
there isn't enough height left in column 1. Especially if you're using
dynamically-determined column widths-- you don't want a very long column
1 that scrolls off the bottom of the page and then only a few lines in
column 2.
CSS simply doesn't do column layout, maybe a future version will.
Navigation:
[Reply to this message]
|