Posizionamento orizzontale di 3 div

**alcio74** · 23-10-2012, 01:09

Ciao a tutti.
Di solito scrivo nel forum di PHP ma ho un problema come da oggetto per cui posto anche qui.
Devo disporre 3 div in allineamento orizzontale, contenuti in un DIV con width automatica in un layout fluido.
Il primo DIV deve avere larghezza predefinita, mentre gli altri due possono essere di dimensione variabile.
Questo è il mark-up.

codice:

 <div id="head_rece">
    <div id="img_rece">  
      [img]immagine.jpg[/img]
    </div>			
    <div id="info1_rece">
        testo 1
    </div>			
    <div id="info2_rece">
       testo 2
    </div>			
 </div>

Per farlo utilizzo il seguente codice CSS.

codice:

#head_rece { 
	margin: 0 auto;
	padding: 0;
}
#head_rece > div {
	display: inline-block;
}
#img_rece {
	width: 33%;
	height: 220px;
	display: block;
}
#img_rece img {
	width: 220px;
	height: 220px;
}
#info1_rece, #info2_rece {
	display: block;
	width: 33%;
	min-height: 220px;
	padding: 5px;
}
#info1_rece {
	background: #ccc;
}
#info2_rece {
	background: #ddd;
}

Ovviamente l'ho depurato di tutto quello che in questa sede non serve.

Ora il mio problema è che mi aspettavo un comportamento del genere.

Invece ottengo questo:

Dove sbaglio?

Grazie in anticipo

**adempius** · 23-10-2012, 01:43

Potrebbe interessare anche a me la risposta... Ma non manca qualcosa tipo float?

**ratte** · 23-10-2012, 11:14

o/ ! Hmmm... sicuro si... manca il float 8) Aggiungerei un altro paio di cose: la gestione della larghezza immagine un poco più flessibile ed il margine dei div in % (non è del tutto coerente una largezza in percentuale con un margine in pixels).
Risulterebbe un codice tipo questo:

codice:

<head>

<style>
#head_rece { 
	margin: 0 auto;
}
#head_rece div {
	width:31%;
	margin:0 1%;
	float:left;
}
img {
	width:100%;
	max-width:220px;
}
</style>

</head>
<body>

 <div id="head_rece">
    <div id="img_rece">  
      [img]immagine.jpg[/img]
    </div>			
    <div id="info1_rece">
        testo 1
    </div>			
    <div id="info2_rece">
       testo 2
    </div>			
 </div>

</body>
</html>

Ciao!

**alcio74** · 23-10-2012, 11:50

Ragazzi, vi ringrazio delle risposte... ma con inline-block non serve il float!
Avendo un layout fluido, se metto il float, per dimensioni di browser basse il terzo blocco mi andrebbe non si sa dove!
La questione della larghezza percentuale, poi, è relativa.
A me interessa solo che il primo blocco contenga una immagine 220px x 220px... non che l'immagine possa avere una dimensione massima di 220x220.

Qualcuno ha qualche altra idea??

**fcaldera** · 23-10-2012, 12:02

1) manca un vertical-align per i blocchi

2) devi cambiare il comportamento degli spazi tra i blocchi

#head_rece { white-space; nowrap }
#head_rece > div { white-space; normal; vertical-align: ... ; }

**alcio74** · 23-10-2012, 14:52

Wow... ecco cosa mancava.
Ti ringrazio!

Discussione: Posizionamento orizzontale di 3 div

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento orizzontale di 3 div

Permessi di invio