Display one div before other div

[Lupi]

Hi experts,

I might just be overcomplicating a simple issue, but I have tried finding a solution to no avail.

I have two divs:

-------
DIV 1
height varies!
-------

-------
DIV 2 (height constant)
-------

No, I want to display div2 BEFORE div1. But, div1's content is loaded dynamically (from PHP script) and div2 needs to display contents from div1. So I can't simply put div2 before div1 in the document.

I was thinking along the lines of absolute positioning, but the page structure varies so I can't use absolute values.

Any ideas greatly appreciated.

Cheers, Chris

[Major_Payne]

The div can still be loaded but you can shove it clean off the page or hide it with: visibility: hidden;

Maybe display: none; might work better so try both. The first one just hides the element. The second removes it from the document flow.

Ron

[SuzyUK]

I was thinking along the lines of absolute positioning, but the page structure varies so I can't use absolute values.

You could.. when you say you want div 2 before div 1 do you mean literally, one atop the other;

---------div 2-------
---------div 1-------

or are they to side by side?

and either way can you add or have you already got wrapper div - cleanly around the 2 divs in question?

[topr8]

maybe i'm misunderstanding you ... however after reading your post i thought this is a php issue not a css one.

none of the page is loaded until the php script has executed completely, so why don't you do something like this

php code to produce content for div 1
set $variable1='content of div 1';
php code to produce div 2 (can use data used to produce the div 1)
set $variable2 = 'content of div 2'
begin to write the html of the page
echo '<div 2>'.$variable2.'</div>'
echo '<div 1>'.$variable1.'</div>'

apologies if i totally misunderstood you.
if i did what do you mean by: div2 needs to display contents from div1

[Lupi]

Suzy, yes, that's what I'm trying to do:
---------div 2-------
---------div 1-------

One atop the other. A wrapper div I have.

<div id="wrap">
 <div id="1"></div>
 <div id="2"></div>
</div>

topr8, it's a good idea under normal circumstances. The thing is, div 1 is populated by an AJAX call to a PHP script. The responseText cannot return PHP variables where text could be stored for later use, it can only return text strings. Storing the responseText in a JS variable for later use does not work in this specific site (related to site architecture more or less).

I could find a workaround with PHP/JS, but it would be very inefficient. The most feasible solution for me seems to be CSS positioning to display div 2 before div 1, if that's possible at all.

Thanks for your help!

[Lupi]

I actually found a topic on Stackoverflow about exactly the same issue I have. They suggested JS/jQuery solutions, such as

$('#secondDiv').insertBefore('#firstDiv');

From what I've read there, it's not possible to achieve what I'm trying to do with CSS if I don't know the exact heights of my divs (for absolute positioning with negative margins, for instance).

[Lupi]

CSS 3 move-to could be an option, but still to early for that.

[SuzyUK]

well you say div 2 has a constant height is that not the same as fixed? - if it were it would be possible as you say with some positioning

relatively position the wrap div, margin the first div by the height of the second and absolutely position the second to the top of the wrapper..

I had a float solution no heights required but not sure it would work for one atop the other I'll have a look later

[SuzyUK]

sorry I had to rush before.. here's the code sample, though I'm not sure it will work for the AJAX call you describe.. if the height of div 2 is not actually fixed but could be related to text size, you could use em instead of px for the height/margin values and the positioning should still work, will leave it for you to try.. even if it just eliminates a possibility ;)

CSS:

#wrap {position: relative; border: 1px solid #000;}
#one {margin-top: 320px;}
#two {height: 300px; background: #eee; position: absolute; top: 0; left: 0; }

HTML:

<div id="wrap">
<div id="one"><p>the first variable div</p><p>more text here</p></div>
<div id="two">the second fixed height div</div>
</div>

the float solution I mentioned I don't think would be much better or worse than above as it would also need a height value (px or em) for div 2, I think anyway.. thinking about it..