Re: [css3-multicol] overflow and paging?

> On Mon, Oct 11, 2010 at 10:03 AM, Shelby Moore <shelby@coolpage.com>
> wrote:
>> If I am understanding you correctly, I think you misunderstood my point?
>>
>> The problem I described is where I have set the container element to be
>> smaller than the viewport height (using JavaScript until CSS Units are
>> available).
>>
>> The problem is that the multi-column content in that container is *MUCH*
>> taller than the container, so I have to scroll the container from bottom
>> to top as I read right to next column. The problem is not the height of
>> the container, but rather that the multi-column layout is not paginating
>> *WITHIN* the container to the height of the container.
>>
>> This also causes the end of the content to be in the first "page", and
>> the
>> middle of the content to not be on the first "page", where "page" means
>> the (clientHeight) height of the container element.
>>
>> Does that clarify the problem, or do I need to clarify further?
>
> Ah, looks like I did misunderstand you.  I skipped over the part where
> you clarified that the multicol itself was taller than the parent.
>
> The problem seems similar, however.  In ordinary cases, you can just
> not do that - don't set a child to be taller than its parent.  In the
> particular case you're mentioning, where the parent is an <iframe>,
> the solution should be similar to what I already mentioned - using
> javascript, measure the size of the iframe then set max-height on the
> columnar element appropriately.


I am reasonably sure you still don't understand my point. Let me draw from
diagrams to see if you can clarify if I am misunderstanding you, or vice
versa?  Apologies I should have drawn this in first post, as I guess this
sort of thing isn't easy to visualize from written description.

I am not using an <iframe>, but rather a <div style='overflow:auto;
column-width:xxx'> as I wrote in my opening post for this thread.  I size
this <div>(1) such that it is height of the viewport:

-------------
|           |
-------------
|   |       |
| 1 |   2   |
|   |       |
-------------

Then I fill that <div> with inline content and I set the column-width on
the <div>, so then I have multiple columns displayed within that pane(1).

The problem is that that I expect the columns in pane(1) to be paginated
to the height of pane(1), so there will be page breaks __WITHIN__ pane(1).
There are no page breaks for the viewport, because the panes(1) and (2)
never are taller than the viewport.  I have no way to make the inline
content less tall, because the border between pane(1) and pane(2), is
draggable by the user.

In other words, I expect the following in pane(1) where my inline content
is in alphabetical order:

-------------
|           |
-------------
|A D|       |
|B E|   2   |
|C F|       |
-------------
 G J
 H K
 I L

 M P
 N Q
 O R

But instead now I erroneously see:

-------------
|           |
-------------
|A J|       |
|B K|   2   |
|C L|       |
-------------
 D M
 E N
 F O
 G P
 H Q
 I R

Received on Monday, 11 October 2010 17:55:51 UTC