Altezza del DIV - Come funziona?

Allora, è da mesi che mi ritrovo sempre con questo problema e non sono mai riuscito a capire dove sbaglio.
In questa mia pagina ho creato due div affiancati, e fino a qui tutto bene. Ora, siccome è una prova di responsive design, restringendo la finesta del browser ad un certo punto cambia il formato e i div si spostano uno sotto l'altro. Ma quando questo accade, il div blu diventa basso e i div degli articoli escono fuori.

  <div class="content">
  
<?php
...
?>
                        
    <div class="news">
     <p class="news_title">Title1</p>
     <br>
     <p class="news_data">29/05/97</p>
     <br>
      <p class="news_articolo">Lorem ipsum sim amet</p>
    </div>
  </div>

e il CSS:

.content{
	margin:0px 0px 4px 0px;
	background-color:#2A3C82;
	padding:1%;
	display:block;
	height:auto;
}

. Quello che non riesco a capire è come mai accada questo. Di sicuro è un mio erroe, perché mi capita spesso. Ma dove sbaglio? Il div non dovrebbe adattarsi al contenuto?
Grazie a chi mi aiuta a capire questa cosa, ciao!

Prova a definire delle dimensioni minime nel CSS in modo che puoi restringere fino a un tot. e poi ti spunta una bar orizzontale :)

[karl94]

Quello che non riesco a capire è come mai accada questo. Di sicuro è un mio erroe, perché mi capita spesso. Ma dove sbaglio? Il div non dovrebbe adattarsi al contenuto?
Grazie a chi mi aiuta a capire questa cosa, ciao!

È normale, è il comportamento che si ha normalmente con i float. Un elemento flottante non influisce solamente gli elementi che hanno il medesimo genitore, quindi se vai a levare l'altezza fissata per questo, l'elemento con classe content si adatterà in modo da contenere tutti gli elementi posizionati normalmente (quindi ignora i vari div.news). Le soluzioni a questo problema le puoi trovare in questa discussione: http://forum.it.altervista.org/html-...ml#post1093406.
Ti sconsiglio comunque di impostare un'altezza fissa per il contenitore.

Prova a definire delle dimensioni minime nel CSS in modo che puoi restringere fino a un tot. e poi ti spunta una bar orizzontale :)

Così facendo però il risultato non sarebbe responsivo...

Ah, perfetto! Ho risolto con Overflow! Grazie 1000 Karl!