468,316 Members | 2,053 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

Change display order (vertical)

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

Mar 16 '07 #1
2 6334
On 2007-03-16, dv******@ddrtech.com <dv******@ddrtech.comwrote:
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.
Mar 16 '07 #2
On Mar 16, 1:26 pm, Ben C <spams...@spam.eggswrote:
On 2007-03-16, dvoms...@ddrtech.com <dvoms...@ddrtech.comwrote:
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.
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

Mar 16 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by jfburr | last post: by
10 posts views Thread by Richard | last post: by
10 posts views Thread by Harry Haller | last post: by
13 posts views Thread by Benjamin Smith | last post: by
3 posts views Thread by spielmann | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.