Allineare elementi intorno a blocchi di float

[miki92]

Buongiorno,
ho bisogno di creare una cosa tipo questa (guarda i blocchi "Un caffè a casa di...", "Vita e Mare" e "ProcidaTV - 101 Rita"), ho fatto 3 blocchi con float left e fin qui tutto ok. Il Problema nasce quando (in fase di test) aggiungo dopo questi blocchi un qualsiasi elemento (<p>,<blockquote>, ecc) esso al posto di partire sotto i blocchi, parte dove finisce uno dei blocchi.

Dato che non ho un esempio pratico da mostrare on-line vi segnalo queste due immagini:

- Grafica che dovrebbe uscire
- Grafica attuale

Concentriamoci sulla parte violetta che è il body, i rettangoli rossi sono i due box (di diversa altezza ma stessa larghezza), l'arancio/marroncino sono i tag <p> e <blockquote>, le linee nere rappresentano il testo.

Come potete vedere dalla seconda immagine il tag <blockquote> inizia già da sopra/sotto i box anche se il testo compare sotto, fatto sta però che a volte inizia da dove comincia il campo blockquote.

Mi sapreste aiutare a "bloccare" quel campo?

Il codice attualmente in uso è:

<div class="box r"><span>TITOLO</span>
<!--<div class="rq rss"><h3>Titolo RSS</h3> Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="box v"><span>TITOLO 2</span> <ul><li>Uno</li><li>Due</li></ul><ol><li>Voce</li><li>Voce</li><li>Voce</li></ol></div>

<blockquote>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>

CSS:

.box{
    display:block;
    float:left;
    height:200px;
    margin-bottom:12px;
    padding:5px;
    overflow:hidden;
    width:47%;
}
.box span{
    background-position:left top;
    border-bottom-style:solid;
    border-bottom-width:3px;
    color:#444;
    height:25px;
    margin:0;
    margin-bottom:3px;
    padding:0;
    padding-left:27px;
}
.r span{
    background-image:url('img1.pn');
    background-repeat:no-repeat;
    border-color:#000;
}
.v span{
    background-image:url('img2.png');
    background-repeat:no-repeat;
    border-color:#FFD;
} 

Spero in vostro aiuto...

Usa un "clear: both;".. se nn funziona direttamente sul blackquote prova a metterci prima un div con appunto "clear: both;"

Ciao!

[miki92]

Si ma in questo caso è capitato che sia un blockquote, se capitasse altro elemento? Cioè dovrei specificare un clear:both per ogni elemento che si trovi al di sotto dei box?

[nukta]

Si ma in questo caso è capitato che sia un blockquote, se capitasse altro elemento? Cioè dovrei specificare un clear:both per ogni elemento che si trovi al di sotto dei box?

In questi casi, per il layout, consiglio sempre l'utilizzo delle liste: gli elementi che flottano come elementi <li> di liste ordinate o non ordinate. anzi, per disporli allineati non serve neanche il float, basta impostare il display come "inline". (default è list-item).
questo evita i problemi di elementi che flottano e "l'abuso" di elementi div.

Poi, basta un solo clear per "pulire" il float. potresti usare una classe "clear", con stile clear:both, da aggiungere dove ti serve, applicata anche ad un tag <br> o <hr>.

L'uso delle liste inoltre permette di valorizzare il contenuto e di renderlo leggibile anche senza foglio di stile.