Problema con il float

[pappolo]

Salve a tutti, ho un problema che non so risolvere.

Ho un layout con 3 colonne, le colonne laterali si "mantengono" grazie a due float, mente il footer ha la regola: clear:both

E fin qui tutto bene

Il problema sorge nella colonna centrale, nel quale vengono visualizzate delle news, cui sono associate delle immagini.

Anche queste immagini hanno un float, ed alla fine della news metto un div vuoto con "clear:right" (le immagini floattano a destra)

Il problema è che questo clear mi "sovrascrive" quello del footer, per cui tutto il contenuto che viene dopo il div vuoto mi si posiziona sotto la colonna dei contenuti extra che floatta a destra

C'è un modo per indicare che quel clear:right deve considerarsi solo per il div delle news?

Spero di essere stato chiaro

Grazie a tutti

[awd]

:master: a mente mica è facile! c'è una pagina da vedere?

[pappolo]

Purtroppo al momento no, cmq posso farti vedere uno schema

la pagina:

<div id="container">
	<div id="container2">
    <div id="header">
        [img]images/header.jpg[/img]
    </div>
    <div id="navigation">
	<div id="oggetto">
	[img]images/menu.jpg[/img]
        <ul>[*]Home[*]News[*]Photo Gallery
			[*]Photo Gallery[*]Guestbook[*]Links[*]Guide
			[*]Staff
            [/list]
					</div>
	<div id="oggetto">
        <p class="centro">[img]images/stats.jpg[/img]</p>
		

Utenti connessi: 1</p>
		

Visitatori totali: 12334</p></div>

    </div>
	
    <div id="extra">
	<div class="newsbox">
	<p class="centro">[img]images/foto.jpg[/img]</p>
	    

[img]foto/thumbs/DSCN0061.JPG[/img]</p>
		<p class="titolo1">2 idioti...</p>
			  <p class="autore">Inserita da Mario il 31/03/2005</p>
			  
        <p class="autore">Guarda tutte le foto</p> 

	</div>
        
        <div class="newsbox">
	<p class="centro">[img]images/mail.jpg[/img]</p>
	<form action="subscribe.php" method="post" id="mailing">
	<p class="centro">Email</p>
	<p class="centro"><input type="text" name="email"></p>
	

<INPUT type="radio" name="selezione" value="iscrizione" checked> Iscriviti</p>
	

<INPUT type="radio" name="selezione" value="rimozione"> Cancellati</p>


<input type="image" name="submit" src="images/sub.gif"> </p></form></div>
		</div>

<div id="content">

<div id="contenuto">
	<div class="news">
	<h3>News in rilievo</h3>
	<p class="autore">Inserita da Mario il 31/03/2005</p>
[img]images/newsbox.jpg[/img]
<p class="titolo">Titolo della news</p>


Lore ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat.


Lore ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat.


Lore ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat.
<div class="clearerright"></div>
          <div class="destra">Leggi le altre news</div>
        </div></div>
		
		<? include("lista_news.php");
		?>


    </div>
    <div id="footer"><?
	include("footer.htm");
	?></div>
	</div>
</div>

Per quanto riguarda il css, la parte ineteressata

/*stili per il layout fisso con posizionamenti assoluti*/
html,body{margin: 0;padding:0}
body{font-family: verdana;font-size: 76%;text-align: center;  width: 98%; margin: 0 auto;
border-left: 1px solid #6A9CE3;
border-right: 1px solid #6A9CE3;
background-image: url(images/sfondo.jpg);
 background-repeat: repeat-x;
 background-color: #fff;     }
div#container{background: url(images/rightcol.jpg) repeat-y top right;text-align: left 
   }
div#container2{background: url(images/leftcol.jpg) repeat-y top left;
text-align: left
}


/*stili specifici per il layout*/
div#navigation{float: left;width: 180px;\width:190px;w\idth:180px;padding: 1.5em 0 0 10px}
div#extra{float: right; width: 200px;\width:210px;w\idth:200px;padding: 1.5em 5px;   }
div#content{margin: 0 210px 0 190px;padding: 1.5em 1em 1em 1em;

 }
div#footer{clear:both;text-align:center; 

    background-color: #fff;
	background-image: url(images/footerbg.jpg);
	}



div#oggetto p{
	margin:0;
	padding:0.4em

}

div.news{
margin-bottom: 10px;     
	padding: 0.4em;

}

div.news img{
float:right;
margin: 10px;
border: 1px solid #6A9CE3;
}

div.news h2, div.news2 p{
margin:0;
padding: 0
}

div.news h2{
margin-top: 10px;
margin-bottom:5px;
color: #6A9CE3;
font-size: 1.3em
}
div.news h3{
margin-top: 10px;
margin-bottom:5px;
color: #6A9CE3;
font-size: 1.3em
}

div.clearerright{clear: right;
padding: 0;
margin: 0}

Il problema è che il div news si chiude con un div vuoto con classe clearerright

Questo div dovrebbe annullare il float solo del div news e invece è come relativo a tutto il sito, infatti la parte subito successiva (<div class="destra">Leggi le altre news</div>) si trova SOTTO il div extra.

[Marcolino's]

E' normale, i float interrompono i normali flussi dei blocchi, posizionando un nuovo blocco flottante al di sopra di tutti gli altri, come accade in position: absolute.

Con quest'ultimo si può fare molto, dichiarandolo interno ad un altro blocco.

Ma tu div.news lo dichiari elemento esterno a tutto l'intero sito, mentre per fare ciò che vuoi tu, sevi dichiararlo interno al contenitore di testo: div#content div.news { .. } questo dovrebbe a rigore spezzare il flusso.

[pappolo]

Grazie mille, non avevo pensato a questa situazione