Sovrapporre un div ad altri div

[Pennywise83]

Ciao a tutti, mi chiedevo se era possibile fare una cosa del genere...



In pratica si tratta di una sidebar con all'interno diversi div per riga (quelli con i bordi verdi), l'html si presenta così:

<div id="sidebar">
<div class="immagine">[img]etc[/img]</div>
<div class="row"> riga 1 </div>
<div class="row"> riga 2 </div>
<div class="row"> riga 3 </div>

Vorrei far sì che il div "immagine" si sovrapponga ai div "row" (che hanno una larghezza variabile). Specifico che hanno larghezza variabile perché ad esempio se nella riga 2 ci fosse molto testo quest'ultimo quando "incontra" il div "immagine" dovrebbe andare a capo.

Non so se mi sono spiegato bene, è possibile fare una cosa del genere?

[cortex]

se ho capito bene...

io proverei con una lista...

se non ti piace o non ci si riesce dovresti una z-index

[Pennywise83]

Uhm... perché utilizzare una lista, con dei div non si può?

In ogni caso passo il codice css dei box interessati:

#sidebar{ /* Barra laterale */
width: 302px;
padding: 0;
margin:0 0 6px 0;
float: right;
clear: right;
}

.row { /*riga*/
background: #fdfeff;
text-align: left;
padding: 8px;
}

.immagine {
float: right;
padding: 5px;
display: block;
}

In pratica vorrei far sì che all'interno di sidebar convivano sia i div con classe .row che il div con classe .img, quest'ultima dovrebbe avere la precedenza nel senso che le righe dovranno adattarsi alla sua dimensione...

[Pennywise83]

nessuno?

[ricman]

Originariamente inviato da Pennywise83
In pratica vorrei far sì che all'interno di sidebar convivano sia i div con classe .row che il div con classe .img, quest'ultima dovrebbe avere la precedenza nel senso che le righe dovranno adattarsi alla sua dimensione...

Allora non devi usare il float nella classe dell'img

[Pennywise83]

Ho provato a fare come dici (omettendo il float) ma non ottengo nulla... o meglio, l'imagine viene allineata nello stesso modo in cui si allinea il testo, segue cioè le regole del div che c'è subito sotto... (row)

[ricman]

Originariamente inviato da Pennywise83
Ho provato a fare come dici (omettendo il float) ma non ottengo nulla... o meglio, l'imagine viene allineata nello stesso modo in cui si allinea il testo, segue cioè le regole del div che c'è subito sotto... (row)

Dovresti mettere il tag <img> dentro il div row1 (o come si chiamava...)

[Pennywise83]

Ma facendo come dici tu, mettendo l'immagine dentro la row, non otterrei quello che vorrei...

Posto un'altra immagine per spiegare meglio...

[Pennywise83]

up

[mucu]

secondo me l'unico float lo devi dare all'immagine o al div che contiene l'immagine (senza block)
poi gli altri si spalmeranno di conseguenza
per fare leffetto tabella il testo prova a metterlo in un p