position 2 relative <div> in switched order

Kabe · November 23rd, 2004, 06:40 PM

hi

is it possible to do this:
<body>
<div style="margin:0 15% 0 5% 0;width:80%;">
<div id="2">body</div>
<div id="1">header</div>
<div>
</body>

must be displayed as:
header
body

Thus, places of #1 and #2 must be switched visual

I know this is possible when working with absolute position, but can't do this 'cause the height is variable of both <div>

kabe.be

Snib · November 23rd, 2004, 08:52 PM

I'm just curious... but why must you put the body before the header?

-Snib
Where will you be in 100 years?
Try new FreshView 0.2!

richard.york · November 24th, 2004, 08:26 AM

Yes, it is possible. In fact you can put the content of the body in pretty much any order you want. In this case CSS positioning is what you're after. The header and the body are absolutely positioned, this makes their actual order in the source irrelevant.

Snib, the reasoning behind this is usually to show the visitor the most important content first, especially on low bandwidth connections.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

Snib · November 24th, 2004, 11:24 AM

Quote:

quote:I know this is possible when working with absolute position, but can't do this 'cause the height is variable of both <div>

Quote:

quote:In this case CSS positioning is what you're after. The header and the body are absolutely positioned...

I think what our friend is trying to ask for is that no matter how large the two <div> elements are, they should appear in reversed order. In order to do this directly with CSS, you'd have to know a static measurement of the height of the header.

I wonder if there's a way to do this dynamically with JavaScript, by detecting the header <div>'s end.

Thanks for the explanation Rich, I never thought of that :-)

-Snib
Where will you be in 100 years?
Try new FreshView 0.2!

richard.york · November 24th, 2004, 12:34 PM

> I know this is possible when working with absolute position, but can't do this 'cause the height is variable of both

Sorry, I didn't read that far! :-) That's the problem with looking at P2P posts when first waking up.

It can be done with positioning, methinks, The problem that you're encountering, no doubt, is overlapping the two elements in certain conditions. In which case some Javascript might be necessary, at least for IE, and maybe even for all browsers.

Do you have a link to the project?? This would help us better see what you're up against and help us to make better suggestions.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design