Help div

[fdr]

ciao a tutti,
vorrei creare alla stessa altezza(alla fine della mia pagina tenendo conto che sopra ci sono già altri layer) due layer, questo è quanto sto provando io, però in questo es. fondodx sta appena sotto al fondosx, come faccio ad averli "alla stessa linea"(alla stessa altezza)??

Grazie
FDR

#fondo {
height: 5px;
width: 569px;
padding: 0px;
margin: 0px;
}

#fondosx {
height: 5px;
width: 148px;
background-repeat: no-repeat;
margin-left: 32px;
background-color: #FF0000;
}

#fondodx {
height: 5px;
width: 331px;
background-repeat: no-repeat;
margin-left: 198px;
background-color: #FFFF00;
}


<div id=fondo>
<div id=fondosx></div>
<div id=fondodx></div>
</div>

[Miki73]

aggiungi:

#fondo { background: #FF0 url(sfondo_col_sx.gif) left top repeat-y }

dove sfondo_col_sx.gif è un'immagine monocolore (di colore #FF0000) di lunghezza 148px che ti crei con un programma di fotoritocco; quindi devi eliminare le regole che interessano i background per gli elementi #fondosx e #fondodx, che erediteranno quelli dell'elemento contenitore!

[seed_squall_it]

La soluzione più semplice sarebbe aggiungere float: left alle regole dei due div che devono stare affiancati (fondosx e fondodx).

Tuttavia guardando il tuo codice ho visto che hai impostato il margin-left in entrambi i div. Usando float: left su di essi, IE incorre nel bug dei margini raddoppiati (margin-left con float: left)!

Una soluzione può essere quella di "spaziare" i due div impostando il margin-right del div fondosx a 198px. Tuttavia hai anche il margin-left del box a sinistra. Se quel margine ti serve, dovresti provare in questo modo:

1. Inverti i due div nel codice XHTML (ovvero scrivi prima fondodx e poi fondosx).

2. Invece di float: left, nelle loro regole di stile dichiari float: right.

3. Lasci impostato normalmente il margin-left di entrambi i div, perché ora non si trova più sullo stesso lato del float.

Infine, subito prima di "chiudere" il div "fondo", aggiungi un tag vuoto come un
a cui assegni una classe (chiamiamola class="clear"). La classe nel CSS è fatta così:

br.clear {
clear: right;
}

Questo ripristina il normale flusso del documento dopo i 2 box flottanti e permette quindi al box "fondo" che li contiene di essere influenzato dalla loro altezza (puoi eliminare height: 5px dalla regola del box "fondo"). Inoltre, ti risolve un bug di Netscape 6 nella gestione dei box che contengono solo box flottanti.

[fdr]

grazie per l'aiuto
FDR