Allineare elementi intorno a blocchi di float
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 è:
Codice HTML:
<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:
Codice PHP:
.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...
