Élément de verrouillage Position relative à un autre élément

Question

Quand mes chargement de la page, je trouve la position de div_left sur la page et définir le haut de div_right pour qu'ils apparaissent côte à côte. C'est la seule façon que j'ai trouvé pour le faire parce que ma page est compliquée avec plusieurs formes et autres. Le code pour trouver/position définie est la suivante:

function findPos() { 
    var curLeft = curTop = 0; 
    var obj = $("#div_left"); 
    var position = obj.position(); 
    curLeft = position.left; 
    curTop = position.top; 
    moveToPos(curLeft, curTop); 
} 

function moveToPos(newLeft, newTop) { 
    $("#div_right").css({ 
     position: "absolute", 
     top: newTop + "px", 
     left: (newLeft + 550) + "px" 
    }); 
} 

Les éléments qui apparaissent au-dessus de ces divs changer la taille régulièrement, principalement par .toggle(). Je constate que div_right ne bouge pas avec le reste des éléments de la page lorsque les éléments au-dessus sont "en expansion" ou "en contraction". Y a-t-il un moyen d '"ajouter" div_right à quelque chose ou en faire un enfant de quelque chose afin que je ne doive pas le déplacer par programme à chaque fois? Ce serait douloureux en raison de l'animation .toggle().

EDIT 1

Vous pouvez donc voir, je ne peux pas contenir div_left et div_right dans une plus grande div parce que je couperont par form1. Pour autant que je sache, un formulaire ne peut pas être divisé.

EDIT 2

HTML de base:

<form id="form1"> 
<table id="table1"></table> 
<div id="div_left"></div> 
</form> 

<div id="div_right"> 
<form id="form2"></form> 
</div> 

Answer 1

Pourriez-vous essayer d'expliquer comment votre code est différent de ce violon de travail? http://jsfiddle.net/FFnyA/2

Edit: Code d'affichage pour la postérité

html

<form method='post' id='form1'> 
    <div id='table_container'> 
     <table><tr><td>1</td><td>2</td></tr></table> 
    </div> 
    <div id='div_left'> 
    </div> 
</form> 
<div id='div_right'> 
    <form method='post' id='form2'> 
    </form> 
</div> 
<div style='clear:both'></div> 
<div id='other_content'> 
    <p>Look at me</p> 
</div>​ 

css

#table_container 
{ 
    background-color: pink; 
} 
#div_left 
{ 
    float: left; 
    width: 100px; 
    height: 100px; 
    background-color: lime; 
} 
#div_right 
{ 
    float: left; 
    width: 100px; 
    height: 100px; 
    background-color: cyan; 
} 
​ 

Fiddle avec le code de la suggestion de Huangismhttp://jsfiddle.net/FFnyA/6/

Answer 2

Eh bien, je suis sûr que le code est plus compliqué que cette image, mais vous pouvez essayer de mettre div_right à l'intérieur de div_left et div_left seraient positionnés relativement, div_right sera positionné absolument. Mettez CSS "left" pour div_right à la largeur + margin-right de div_left et top: 0; vous devriez avoir ce que vous avez dans l'image.

Cela suppose div_left est une largeur fixe

Mise à jour: quelque chose comme ça

http://jsfiddle.net/FFnyA/5/