Stylesheets - Change display order (vertical)

Author

Change display order (vertical)

dvomsaal@ddrtech.com

2007-03-16, 11:16 pm

This may be a simple request, but I can't find documentation on it.
My page looks like the following:

Header information

Data Set A

Data Set B

Footer information

We'd like to be able to allow users to swap the display order of the
Data Sets, while keeping the document flow. We have, in general, the
page segmented:

<div class="Header">
Header Information
</div>
<div class="AllData">
<div class="DataA">
Data Set A
</div>
<div class="DataB">
Data Set B
</div>
</div>
<div class="Footer">
Footer Information
</div>

Is there a simple way to say "show DataB before DataA"?

If this is obvious, it will lend credence to my follow up question:
what is the definitive book for CSS, taking in to account IE 7.0 and
FireFox 2.0 (I know this may start a religious war...)

Thanks a lot,
DvS

Ben C

2007-03-16, 11:16 pm

On 2007-03-16, dvomsaal@ddrtech.com <dvomsaal@ddrtech.com> wrote:
> This may be a simple request, but I can't find documentation on it.
> My page looks like the following:
>
> Header information
>
> Data Set A
>
> Data Set B
>
> Footer information
>
> We'd like to be able to allow users to swap the display order of the
> Data Sets, while keeping the document flow.
> We have, in general, the
> page segmented:
>
><div class="Header">
> Header Information
></div>
><div class="AllData">
><div class="DataA">
> Data Set A
></div>
><div class="DataB">
> Data Set B
></div>
></div>
><div class="Footer">
> Footer Information
></div>
>
> Is there a simple way to say "show DataB before DataA"?

No. If the heights of DataA and DataB are known beforehand then you can
swap them with position: relative. Otherwise not possible in CSS. Your
best bet would be to use scripting to modify the DOM tree-- just detach
DataA and DataB from their parent, reattach them the other way round,
and let the document reflow.

dvomsaal@ddrtech.com

2007-03-16, 11:16 pm

On Mar 16, 1:26 pm, Ben C <spams...@spam.eggs> wrote:
> On 2007-03-16, dvoms...@ddrtech.com <dvoms...@ddrtech.com> wrote:
>
>
>
>
>
>
>
>
>
>
>
> No. If the heights of DataA and DataB are known beforehand then you can
> swap them with position: relative. Otherwise not possible in CSS. Your
> best bet would be to use scripting to modify the DOM tree-- just detach
> DataA and DataB from their parent, reattach them the other way round,
> and let the document reflow.

I was afraid that was the answer. We'll go back to a server-side
solution and generate the Data sections in a different order.

Thanks a lot,
DvS