Larghezza fissa per box inline

[asweb]

Buongiorno,

avrei bisogno di capire come fare a far rispettare al browser la larghezza impostata nel css per visualizzare dei contenuti inline, vi posto il codice sorgente per maggiore chiarezza.

<div id="mobile-view"> 
			<div id="month-container"> 
			         <div id="month">Gennaio</div>
                                 <div id="month">Febbraio</div>
                                   <div id="month">Marzo</div> 			
                       </div> 		
           </div>

Il foglio di stile

#mobile-view{ 	margin: 0 0 0 150px; 	overflow: auto; 	height:400px; }
           #month-container{ padding-top:5px; }
            #month{
                       border: thin solid #484848;
                       padding:5px; 
                       height:25px;
                       text-align:left;
                       width:744px;
                       display:inline;
          }

Nella box mobile-view dovrei vedere i tre mesi allineati (e me li allinea correttamente) e con larghezza di 700px l'uno ma questo non lo fa...perchè?

Cordiali Saluti

[sea_green]

Innanzitutto una precisazione:
ID sta per identificativo e come tale deve comparire un'unica volta nella pagina.

per es. id="mobile-view" può essere attribuito ad un'unico elemento nella tua pagina.

id="month" viene assegnato a più elementi e non va bene... devi sostituirlo con class="month" e devi modificare il css al posto di #month{} devi scrivere .month{}

Adesso veniamo al tuo problema

esiste un modo per affiancare i <div> senza trasformarli in inline
sostituisci display:inline; con float:left;

fatto questo vedrai che i div avranno la lunghezza desiderata, ma saranno uno sotto l'altro
questo non perché float non funziona, ma perché il div superiore <div id="month-container">
non è abbastanza "grande" per contenerli affiancati.

Se gli assegni una larghezza vedrai che tutto si sistema

Alla fine il css viene così

#mobile-view{ margin: 0 0 0 150px; overflow: auto; height:400px; } 
#month-container{ padding-top:5px; width: 400px} 
.month{ border: thin solid #484848; 
            margin:5px; 
            padding:5px; 
            height:25px; 
            text-align:left; 
            width:744px; 
            float:left; }

[asweb]

Salve,

grazie per la risposta, ma il risultato non è stato quello aspettato.

Mi mostra tutti i mesi a sinistra, uno sotto l'altro e senza bordo.

Cordiali Saluti

EDIT: Mi visualizza i bordi adesso, ma il layout è sempre lo stesso

<div id="mobile-view"> 		
	<div id="month-container"> 		
		<div class="month">SETTEMBRE</div><div class="month">SETTEMBRE</div>
<div class="month">SETTEMBRE</div><div class="month">SETTEMBRE</div>
<div class="month">SETTEMBRE</div><div class="month">SETTEMBRE</div>
<div class="month">SETTEMBRE</div> 			
</div> 	
	</div>

[asweb]

NEW EDIT: si funziona, ma solo se setto la larghezza giusta per contenerli (come avevi detto).
Però dato che io non so quanti blocchi ci saranno nella month-container non potrò sapere la larghezza. Come renderlo flessibile?

Grazie.

[sea_green]

Dipende per quale ragione

non so quanti blocchi ci saranno nella month-container

se è perché utilizzi id="month-container" in più pagine ognuna delle quali ha un diverso numero di blocchi
invece che nel CSS
puoi inserire in head il seguente codice ed assegnare un valore diverso a d'ogni pagina.

<style type="text/css"> 
#month-container{ width: 3400px} 
</style>

P.S. le altre caratteristiche di #month-container le puoi "lasciare" nel CSS


se la ragione per cui non conosci il numero di blocchi è perché hai un sito dinamico
puoi utilizzare lo stesso metodo descritto sopra aggiungendo una variabile (in javascript o in php o in asp) per assegnare la larghezza a #month-container

<style type="text/css"> 
#month-container{ width: VARIABILE px} 
</style>

[asweb]

Ok grazie molte!