Layout orizzontale

**tulsas** · 16-07-2006, 10:48

Sto cercando di fare un sito orizzontale affiancando una serie di div con float:left
Il problema è che questi div si affiancano fintanto che c'è spazio in orizzontale nella finestra del browser, dopo di che iniziano ad andare a capo e formano una struttura a griglia, invece di continuare ad allinearsi solo in una direzione e far comparire la scrollbar orizzontale.

Io invece vorrei ottenere un effetto come questi:
http://csszengarden.com/?cssfile=/058/058.css
http://www.thehorizontalway.com/

Ho usato:

codice:

html,body {
	text-align: center;
	margin: 0;
	padding: 0;
	background-color:#ccc;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 76%
}

div#container {
	text-align: left;
	margin: 0 auto;
	height:440px;
	background-color:#000;
	margin-top:50px;
}

div.box{
	float:left;
	background-color:#fff;
	margin:20px;
	width:250px;
	height:400px;
}

<body>
	<div id="container">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>
</body>

Qualcuno ha qualche idea a proposito?

**fcaldera** · 16-07-2006, 12:35

i float vanno a capo quando superano la larghezza del contenitore.
Quindi come prima cosa prova ad impostare una larghezza al contenitore almeno pari alla somma delle larghezze dei tuoi float

Nel CSS di zengarden l'effetto è invece ottenuto con posizionamenti assoluti dei vari blocchi

**tulsas** · 16-07-2006, 12:54

Originariamente inviato da fcaldera
i float vanno a capo quando superano la larghezza del contenitore.
Quindi come prima cosa prova ad impostare una larghezza al contenitore almeno pari alla somma delle larghezze dei tuoi float

Come temevo...
e non c'è modo di lasciarlo flessibile, senza dover conoscere a priori la larghezza totale dei contenuti?

intanto grazie

**fcaldera** · 16-07-2006, 13:05

i float hanno questo comportamento e comunque è sufficiente stabilire la larghezza dei singoli div flottati (e quindi del contenitore). In alternativa utilizza i posizionamenti assoluti

**tulsas** · 16-07-2006, 13:32

Capìt
grazie, ciao!

Discussione: Layout orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Layout orizzontale

Permessi di invio