pozitionare pe orizontala Div-uri cu tabele

[andras]

Salut,
Nu stiu daca e posibil dar incerc:
Am div-uri cam de forma asta:

Cod: Selectaţi tot

<div id="tb1_c" style="height: auto;">
    <div id="a11" >
         <table id="t1">
         </table>
    </div>
    <div id="a12" >
        <table id="t2">
         </table>
    </div>
</div>

Div-urile a11 si a12 sint plasate stinga-dreapta in pagina si fiecare are inaltime (height) variabila, deci au inaltimi diferite in functie de inaltimea tabelui pe care il contine fiecare div. Vreau sa pozitionez cele 2 div-uri (a11 si a12) la acelasi nivel pe orizontala (style="top: " sau style="margin-top: "). De fapt, primul div se pozitioneaza corect, trebuie sa pozitionez al doilea div la acelasi nivel cu primul. Nu pot folosi style="position:absolute;" sau style="position:relative; " pentru ca atunci nu functioneaza corect drag si drop intre cele 2 tabele (nu este vizibila inregistrarea pe care o trag din stinga in dreapta).
Exista alta cale de a pozitiona div-urile la acealsi nivel? Ma gindesc daca as masura inaltimea primului div (a11) si in functie de asta sa pun in al doilea div (a12) ceva de genul: (pseudocod) style=" top: -(inaltimea masurata a primului div);". Nu stiu daca e posibil. Am incercat in felurite variante dar n-am reusit. Beneficiarul mi-a impus ca inaltimile div-urilor sa fie variabile in functie de cum deschide browserul pagina.

Daca am inteles bine; vrei sa aliniezi cele 2 div-uri in linie pe orizontala, cu tot cu tabelele din ele. In acest caz:
1. Incearca cu "display: inline-block;".
Exemplu:

Cod: Selectaţi tot

<style>
#tb1_c {
  position: relative;
  width: 80%;
  margin: 4px auto;
}
#tb1_c #a11, #tb1_c #a12 {
  display: inline-block;
  margin: 1px 4px;
  border: 1px solid #00f;
  border-radius: .6em;
  padding: 4px;
}
#tb1_c #a11 table, #tb1_c #a12 table {
  width: 200px;
  border: 1px solid #333;
}
#tb1_c #a11 td, #tb1_c #a12 td {
  border: 1px solid #bbb;
}
</style>

<div id="tb1_c">
  <div id="a11">
     <table id="t1"><tr>
       <td>r1 c1</td><td>r1 c2</td>
     </tr></table>
  </div>
  <div id="a12">
     <table id="t2"><tr>
       <td>r1 c1</td><td>r1 c2</td>
     </tr><tr>
       <td>r2 c1</td><td>r2 c2</td>
     </tr></table>
  </div>
</div>

- Demo acest cod:

r1 c1

r1 c2

r1 c1	r1 c2
r2 c1	r2 c2

2. Sau cu "float".
Exemplu cod:

Cod: Selectaţi tot

<style>
#tb1_c2 {
  position: relative;
  width: 80%;
  margin: 4px auto;
}
#tb1_c2 #a11, #tb1_c2 #a12 {
  float: left;
  margin: 1px 4px;
  border: 1px solid #00f;
  border-radius: .6em;
  padding: 4px;
}
#tb1_c2 #a11 table, #tb1_c2 #a12 table {
  width: 200px;
  border: 1px solid #333;
}
#tb1_c2 #a11 td, #tb1_c2 #a12 td {
  border: 1px solid #bbb;
}
.clr {clear: both;}
</style>

<div id="tb1_c2">
  <div id="a11">Div 1
     <table id="t1"><tr>
       <td>r1 c1</td><td>r1 c2</td>
     </tr></table>
  </div>
  <div id="a12">Divc 2
     <table id="t2"><tr>
       <td>r1 c1</td><td>r1 c2</td>
     </tr><tr>
       <td>r2 c1</td><td>r2 c2</td>
     </tr></table>
  </div>
  <br class="clr">
</div>

- Rezultat:

Div 1

r1 c1

r1 c2

Div 2

r1 c1	r1 c2
r2 c1	r2 c2

Varianta cu float: left; imi trebuia. Incercasem si eu varianta asta dar nu-mi iesea pentru ca puneam si float si width: (pixeli). Acum e clar unde am gresit si functioneaza. Multumesc!