Posizionamento div

[g0dl3ss]

Buondì,
sto scrivendo un cms in php, sto iniziando a fare la parte di frontend e chiaramente iniziano a sorgere problemi vari.
Uno di questi è il posizionamento dei div all'interno del contenuto principale.
Essendo un cms(e di conseguenza modificabile dall'utente finale) è importante poter prevedere la posizione dei div con facilità ed ho quindi diviso il contenuto principale in terzi.

/*CONTENT*/

#main_content {
	padding: 0px;
	margin: 0px auto -1px auto;
	width: 990px;
	height: auto;
}

.main_content_full_box {
	padding: 0px;
	margin: auto;
	width: 990px;
	height: auto;
}

.main_content_medium_box {
	float: left;
	padding: 0px;
	margin: auto;
	width: 495px;
	height: auto;
}

.main_content_small_box {
	border-top: 1px solid #CCC;
	float: left;
	margin: auto;
	padding: 0px;
	width: 330px;
	height: auto;
}

Questo è la parte di css dedicata ai div principali, sono classi in quanto devono poter essere applicate a più elementi nella stessa pagina.
L'impostazione di base della pagina principale dovrebbe essere.

<div id="main_content">
    <div class="main_content_medium_box">
    </div>
    <div class="main_content_medium_box">
    </div>
    <div class="main_content_small_box">
    </div>
    <div class="main_content_small_box">
    </div>
    <div class="main_content_small_box">
    </div>
</div>

Ovvero 2 div grandi 1/2 pagina l'uno e sotto 3 div grandi 1/3 della pagina l'uno.
Il problema è che di base questi div si posizionano dove devono ma nel momento in cui inizio ad inserire i contenuti vanno un pò dove gli pare.
Teoricamente mettendo delle altezze in pixel il problema si risolve ma io ho bisogno che stiano dove devono con height: auto;

Qualche consiglio?
Grazie

[Mich_]

Anzitutto quel margin:auto che hai nei full_box, medium_box e small_box potrebbe dare problemi: infatti se alle varie larghezze aggiungi anche un solo px di margine il tutto non ci sta in larghezza. Quindi credo che dovresti mettere il margin a zero.

Inoltre tu hai due blocchi sovrapposti, ciascuno con dei float all'interno, ma ti manca il clear alla fine di ciascun blocco. Questo potrebbe darti il problema che segnali.
Dovresti quindi modificare l'HTML in questo modo:

<div id="main_content">
  <div class="due_col">
    <div class="main_content_medium_box">
    </div>
    <div class="main_content_medium_box">
    </div>
  </div> 
  <div class="tre_col>
    <div class="main_content_small_box">
    </div>
    <div class="main_content_small_box">
    </div>
    <div class="main_content_small_box">
    </div>
  </div> 
</div>

Poi alla fine dei blocchi due_col e tre_col devi operare il clearing (fa' una ricerca nel froum, se non sai come fare - ci sono un paio di tecniche standard). Inoltre quei blocchi ti possono servire per dare lo sfondo se vuoi creare l'effetto colonne (vedi "false colonne").

[g0dl3ss]

Grazie mille, avevo provato una soluzione simile ma l'unica cosa che mi era sfuggita era il clearing.

Inizialmente avevo infatti raggruppato le colonne dentro div ad altezza variabile che prendevano l'intera larghezza della pagina utilizzando come codice html

<div id="main_content">

  <div class="main_content_full_box">


      <div class="main_content_medium_box">
      </div>
      <div class="main_content_medium_box">
      </div>


  </div>
  <div class="main_content_full_box">


      <div class="main_content_small_box">
      </div>
      <div class="main_content_small_box">
      </div>
      <div class="main_content_small_box">
      </div>
 

  </div>

</div>

L'unica cosa che mi mancava era un "clear: both;" nella classe "main_content_full_box".
Modificando quindi il css in

/*CONTENT*/

#main_content {
	padding: 0px;
	margin: 0px auto -1px auto;
	width: 990px;
	height: auto;
}

.main_content_full_box {
        clear: both;
	padding: 0px;
	margin: 0px;
	width: 990px;
	height: auto;
}

.main_content_medium_box {
	float: left;
	padding: 0px;
	margin: 0px;
	width: 495px;
	height: auto;
}

.main_content_small_box {
	border-top: 1px solid #CCC;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 330px;
	height: auto;
}

sembra funzionare tutto.
Ho anche messo i margini dei div a 0px come detto da te anche se non ho ben capito la motivazione.
Grazie dell'intervento.

[g0dl3ss]

Riesumo il topic in quanto è sorto un problema.
La struttura html è la stessa dell'ultimo codice postato.
Avevo deciso di dare una colore diverso dal body al div dei contenuti.
Ho quindi pensato di dare questo colore a "main_content" tuttavia questo colore viene dato solo alla prima fila di colonne("main_content_full_box") e non alla seconda.
Ho inoltre appurato con firebug che sia "main_content" che "main_content_full_box" non sembrano contenere fisicamente le colonne; firebug, infatti, selezionati gli elementi di cui sopra, non visualizza un rettangolo contenente gli altri div ma solo una linea.

A cosa potrebbe essere dovuto questo?

Grazie