simulazione tabella con div

[wiulma]

ciao a tutti!
ho cercato di risolvere il mio problema leggendo vari thread ma non ci sono ancora riuscito.

devo simulare una tabella con 2 righe, di cui la seconda (quella più in basso) contiene 2 colonne:

questo è il codice HTML:

<div id="divSearch" style="display:inline;float:left;width:98%;height: 10%;vertical-align:top;z-index:0;border:2;left:2px;" class="MapNavDivSearch">
<div class="jqHandle jqDrag"></div>
search
</div>
<div style="vertical-align:top;">
<div id="divMap" style="float:left;width:45%;height:90%;" class="MapNavDivInfoOgg">
pippo
<div>
<div id="divMap" style="float:right;width:45%;height:90%;" class="MapNavDivMappa">
<div class="jqHandle jqDrag"></div>
testo 1 testo 1testo 1testo
</div>
</div>


e queste le classi css coinvolte:

.MapNavDivInfoOgg {
background-color: blue;
position: absolute;
}

.MapNavDivMappa {
background-color: fuchsia;
border: 1px solid #006685;
position: absolute;
}

.MapNavDivSearch {
background-color: yellow;
border: 1px solid #006685;
position: absolute;
}

ho provato con diverse combinazioni di float, top, left, margin, ecc.... ma niente ....
i div tendono comunque a sovrapporsi.
la position: absolute; deve essere necessariamente mantenuta perchè i div sono drag&drop, altrimenti non mi funzionano.
se avete qualche suggerimento vi ringrazio molto.

ciao

[wiulma]

up

[Mich_]

I CSS permettono di fare la stessa cosa in modo diversi. Pero` non puoi mescolare gli attributi CSS a caso.

In particolare il posizionamento puo` avvenire:
- mediante attributo position e left/right e top/bottom
- mediante il float
Ma non si possono mescolare le due tecniche nello stesso blocco.

Il primo caso e` piu` complesso e porta spesso a sovrapposizioni
Il caso con float e` piu` semplice, ma occorre procedere con cognizione di causa.

Per prima cosa potresti eliminare i CSS inline: creano molta confusione. Meglio usare TUTTO attributi inseriti dentro un'area specifica (o un file a parte).

Poi ti conviene partire da un layout gia` pronto: mi par di capire che ti interessa un layout a due colonne con header. Ce ne sono molti di quel tipo: alcuni link sono citati tra i "link utili" del forum.

[wiulma]

ciao
intanto grazie.
sposterò gli style dentro la definizione dei css per avere più chiarezza.
poi il problema centrale credo sia quello di simulare delle tabelle annidate.
avevo trovato diversi esempi di quello che cerco, ma niente che simuli delle tabelle annidate.
inoltre il fatto di dover necessariamente tenere l'attributo position impostato ad absolute ho visto che crea dei problemi, anche in base al browser...

grazie intanto

[Mich_]

Non capisco l'"annidamento" delle tabelle (che non e` la stessa cosa dell'annidamento dei blocchi - una tabella e` intrinsecamente formata da tre livelli di blocchi: <table>, <tr>, <td>). Ma forse c'e` qualche altro elemento della pagina che non hai evidenziato.
Comunque i <div> si prestano molto bene ad essere annidati.

Se proprio devi usare i posizionamenti, DEVI necessariamente conscere (e aver capito) come minimo quanto contenuto nei seguenti articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

[wiulma]

leggo gli articoli e poi vedo.
nel caso specifico meglio la struttura che vorrei ottenere.

grazie per l'aiuto