Div: position: absolute, relative e altro...

[meldro]

Allora nel file che posto, osservate come sono messi i div.

Quello che dovrei ottenere è che il div "formazione" (bordi grigi) venga esteso in altezza ad includere anche il div panchina (bordi rossi).

Per come stanno le cose ora, invece, come potete vedere, il div panchina esce dal div formazioni e non va bene.

Ovviamente la posizione dei div deve, invece, rimanere quella che si vede attualmente.
Spero d'essermi spiegato e spero in un vostro aiuto.

Questo è il file: http://wikisend.com/download/563316/Untitled.htm

[sea_green]

Non è molto chiaro
Potresti mandare un'immagine schematica di come vuoi che venga?

Anche un'immagine semplice composta da rettangoli colorati e fatta con paint!

per capire come deve essere il risultato definitivo!

[meldro]

Originariamente inviato da sea_green
Non è molto chiaro
Potresti mandare un'immagine schematica di come vuoi che venga?

Anche un'immagine semplice composta da rettangoli colorati e fatta con paint!

per capire come deve essere il risultato definitivo!

Ecco come vorrei che fosse: http://wikisend.com/download/682660/screenshot.19.jpg

In pratica il div dai bordi rossi, deve restare nella sua posizione ma stendere, in altezza, il div dai bordi grigia che, in teoria, dovrebbe contenerlo.

[sea_green]

<style type="text/css"> 
<!-- 
div.formazioni_interno{width: 690px; margin-left: 6px;border: 5px solid black;} 
div.nome{text-align: right; margin-right: 7px;border: 2px solid blue;} 
div.formazione{position: relative; left: 160px; margin-right: 7px; border: 2px solid gray; } div.logo{position: absolute;top: 0px;left: -140px; border: 2px solid green;} div.panchina{position: relative; bottom: 0px;left: -155px; border: 4px solid red; width:40%} --> 
</style>

oppure se vuoi che si sovrappongono

<style type="text/css"> 
<!-- 
div.formazioni_interno{width: 690px; margin-left: 6px;border: 5px solid black;} 
div.nome{text-align: right; margin-right: 7px;border: 2px solid blue;} 
div.formazione{position: relative; left: 160px; margin-right: 7px; border: 2px solid gray; } div.logo{position: absolute;top: 0px;left: -140px; border: 2px solid green;} div.panchina{position: relative; bottom: 0px;top:-100px;left: -155px; border: 4px solid red; width:40%} --> 
</style>

varia i valori di top e bottom di div.panchina per ottenere il risultato che desideri

[meldro]

Ti ringrazio,
è perfetto!
E pensare che c'ho perso il pomeriggio!

[sea_green]

Non so se funziona su tutti i browser ma prova così

<!-- 
div.formazioni_interno{width: 690px; margin-left: 6px;border: 5px solid black;} 
div.nome{text-align: right; margin-right: 7px;border: 2px solid blue;} 
div.formazione{position: relative; left: 160px; margin-right: 7px; border: 2px solid gray; } 
div.logo{position: absolute;top: 0px;left: -140px; border: 2px solid green;}
div.panchina{position: relative; bottom: 0px;margin-top:-100px;left: -155px; border: 4px solid red; width:40%}
 -->

[meldro]

Originariamente inviato da sea_green
Non so se funziona su tutti i browser ma prova così

<!-- 
div.formazioni_interno{width: 690px; margin-left: 6px;border: 5px solid black;} 
div.nome{text-align: right; margin-right: 7px;border: 2px solid blue;} 
div.formazione{position: relative; left: 160px; margin-right: 7px; border: 2px solid gray; } 
div.logo{position: absolute;top: 0px;left: -140px; border: 2px solid green;}
div.panchina{position: relative; bottom: 0px;margin-top:-100px;left: -155px; border: 4px solid red; width:40%}
 -->

sea_green,
come hai visto ho risolto!
Con un margin-bottom negativo nel div formazione pari ai px del top sul div panchina.

Grazie ancora.