asked on

CSS or jQuery - reposition div between 2 existing divs.

Is it possible to reposition a div element via CSS or jQuery so that it appears underneath another div that has a varying height?

I know I can re-position via absolute positioning, but this will lock the element into its new position. However, if the element above grows in depth there will be an overlap which will mess things up.

In the example below I want "div2" to appear between “div1” & “div3”.

Thanks in advance for your help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>
<body>

<div id="div1">
  <p>This div contains information that will vary the height of this div.</p>
<p>This div contains information that will vary the height of this div.</p>
  <p>This div contains information that will vary the height of this div.</p>
</div> 

<div id="div3">
  <p>This div contains information that will vary the height of this div.</p>
<p>This div contains information that will vary the height of this div.</p>
</div> 

<div id="div2">
  <p>This div contains information that is calculated in div 3.</p>
<p>I then need to reposition this between div1 & div3</p>
</div>
</body>
</html>

Open in new window

sumeetsuvi

U can fix the size of first div & can apply scroll bar.....by this content of first div doesn't overrlap to other div & then u can change the position of second div by absolute position....

DocSeltsam

What do you mean by saying 'This div contains information that is calculated in div 3.'

--TheDoctor

sabecs

ASKER

Thanks for your response, I can't fix the size of the first div as I don't want to have a scrollbar.

Div3 has some php code that executes a function that does some calculation, these are then presented as a total in div 3 but I want this to be displayed above div 2 as a heading. I hope that makes sense.

blueghozt

looking at this I find it difficult to follow what you are trying to do without any CSS - do you just want to move div2 within the mark-up so:

//BEFORE 

<div id="div1">...</div>
<div id="div3">...</div>
<div id="div2">...</div>

//AFTER

<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>

Open in new window

sabecs

ASKER

Yes blueghozt, that is correct..

ASKER CERTIFIED SOLUTION

blueghozt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sabecs

ASKER

Thanks blueghozt.