struttura responsive a tre colonne

[frullino62]

Salve a tutti.
Volendo realizare una struttura a tre colonne responsive ho un problema nella visualizzazione ristretta: la div destra, avendo un float right va si sotto ma rimane a sulla destra della pagina, non allineata.
Allego il codice creato:

<div id="Container">
<div id="Header" style="width: 100%;">&nbsp;</div>
<div style="background-color: #353535; float: left; width: 70%; padding: 10px;">
<div style="float: left;"><img style="display: block; margin-left: auto; margin-right: auto;" src=".../image.jpg" alt="titolo" /></div>
<div>
<h1 style="text-align: right; color: #ffffff;"><strong>TITOLO<br /></strong></h1>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: right;"><span style="color: #ffffff;"><span class="TESTO12">Testo dell'articolo</span></span></p>
<p style="text-align: right;"><span style="color: #ffffff; text-align: right;">Firma</span></p>
<p style="text-align: justify;">&nbsp;</p>
</div>
</div>
<div style="background-color: #c0c0c0; padding: 10px 10px 10px 10px; float: right;">{youtube}linkvideo|300|200|0{/youtube} &nbsp;&nbsp; {loadpositionposizione}</div>
<div style="clear: both;">&nbsp;</div>
</div>

[Prill]

Ciao, non vedo nel tuo codice tre colonne.
Hai:
1.un div largo il 70% (cui sono da aggiungere 10+10px di padding) che contiene un div flottante con l'immagine e un div non flottante con titolo e paragrafo, entrambi senza specificazione di larghezza
2. un div che flotta a destra senza specificazione di una larghezza

un primo problema potrebbe già aversi all'interno del primo div, con a capo indesiderati, il secondo con il contenitore che flotta a destra per il quale dovresti impostare una larghezza, probabilmente anche una larghezza minima

[frullino62]

Ciao Prill, ...infatti inserendo la largheza miima e massima va gia meglio. Unico problema è il div che flotta a destra, riducendo lo schermo va sotto a tutto ma rimane allineato destra, un effetto indesiderato che vorrei eliminare. Hai una soluzione?
Intanto grazie 1000 per la tua risposta e attenzione.

[Prill]

se il div che si allinea a sinistra è il 70% (in realtà è un po' di più perché ha un padding - margini, padding e bordi vanno aggiunti alla larghezza impostata su un elemento), il div che deve allinearsi a destra dovrà essere il 30% (in realtà qualcosa in meno perché anch'esso ha un padding e a causa del padding sul div precedente).
Possiamo innazitutto eliminare i padding dai due div flottanti (il padding o un margine laterale possiamo impostarlo sugli elementi interni così da non avere problemi nel calcolo delle larghezze)

Poi: se i loro contenuti hanno dimensioni fisse - l'immagine, il video -, in base a quelle dovremo calcolare la larghezza minima del div che contiene i due blocchi flottanti

[frullino62]

Grazie Prill, seguendo il tuo consiglio va molto meglio, ho corretto la mia vena animale e tutto risulta molto pulito, il risultato lo vedi qui
Non riesco invece a correggere il disassamento a destra dei due div riducendo lo schermo. Dove sbaglio? Grazie

[Prill]

i tuoi contenuti, per come sono impostati occupano uno spazio di circa 1190 pixel, al di sotto di quella dimensione i div si dispongono su righe diverse
Per quella che è attualmente la situazione dunque quella larghezza dovrà essere impostata come minima
Altrimenti devi far ridimensionare le immagini e stabilita quale sarà la loro dimensione minima ricalcolare la larghezza minima del contenitore

(per misurare velocemente le dimensioni di un elemento, senza far somme con margini e padding, puoi usare l'addon di firefox MeasureIt)