• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 430
  • Last Modified:

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

0
sabecs
Asked:
sabecs
1 Solution
 
sumeetsuviCommented:
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....
0
 
DocSeltsamCommented:
What do you mean by saying 'This div contains information that is calculated in div 3.'

--TheDoctor
0
 
sabecsAuthor Commented:
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.  
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
blueghoztCommented:
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

0
 
sabecsAuthor Commented:
Yes blueghozt, that is correct..
0
 
blueghoztCommented:
well the quickest way would be to have 4 divs. Whatever you are calculating in #div2 would be hidden until a trigger (is there a form submission?) which could simply either use jQuery to hide #div4 and show #div2 - if you want code for this it would be best to show the real code including PHP as the starting point
//BEFORE

<div id="div1">...</div>
<div id="div2" style="display:none">...</div>
<div id="div3">...</div>
<div id="div4">...</div>

//AFTER

<div id="div1">...</div>
<div id="div2" style="display:block">...</div>
<div id="div3">...</div>
<div id="div4" style="display:none">...</div>

Open in new window

0
 
sabecsAuthor Commented:
Thanks blueghozt.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now