Float con 4 box affiancati

[ciro78]

Devo realizzare una cosa come quella in figura. Lo scopo , usando il codice che vi posterò, sembra raggiunto. In genere però, nell'ultimo float, che in questo caso corrisponde a .sx5, inserisco un clear. Se lo metto mi sfasa tutto il layout

il codice del css è il seguente

	.sx1
				{
				position:relative;
				width:105px;
				height:105px;
				border:2px solid #6699FF;
				}
				.sx2
				{
				position:relative;
				float:right;
				width:30px;
				height:105px;
				border:2px solid #FF0033;
				}
				.sx3
				{
				position:relative;
				float:right;
				width:105px;
				height:105px;
				border:2px solid #FFFF00;
				}
				.sx4
				{
				position:relative;
				float:right;
				width:105px;
				height:105px;
				border:2px solid #FF0000;
				}
				.sx5
				{
				position:relative;
				float:right;
				width:105px;
				height:105px;
				border:2px solid #00FF00;
				}

quello della pagina

<div class='sx_alto'>
		
		<div class='sx2'>
		</div>
		<div class='sx3'>
		</div>
		<div class='sx4'>
		</div>
		<div class='sx5'>
		</div>
		<div class='sx1'>
		</div>
	</div>

div sx alto è il contenitore di sx1 etc.....

[ciro78]

mi ero scordato la foto

[Gunn]

nel tuo markup l'ultimo float non è sx5 ma sx1

[cerba]

Mi permetto di darti un consiglio: fai le cose semplici e evita di scrivere attributi nativi. Ho fatto qualche piccola modifica e ora viene come lo vuoi..almeno spero...ti posto il tutto:

#sx_alto{padding:20px;border:1px dotted red;height:145px}
#sx1{float:left;width:105px;height:105px;border:2p x solid #6699FF;margin:5px }
#sx2{float:left;width:30px;height:105px;border:2px solid #FF0033;margin:5px }
#sx3{float:left;width:105px;height:105px;border:2p x solid #FFFF00;margin:5px }
#sx4{float:left;width:105px;height:105px;border:2p x solid #FF0000;margin:5px }
#sx5{float:left;width:105px;height:105px;border:2p x solid #00FF00;margin:5px }


<div id='sx_alto'>

<div id='sx1'> </div>
<div id='sx2'> </div>
<div id='sx3'> </div>
<div id='sx4'> </div>
<div id='sx5'> </div>
</div>


Cambiato da classi a blocchi,Testato su IE e FF

[ciro78]

quali sono gli attributi nativi che avrei adoperato?
come mai usi il left e non il right?

[cerba]

MI son permesso di cambiare in blocchi piuttosto che in stili per abitudine ma non solo.
Se devi mettere del testo vai molto meglio a tenere leggero il codice e a facilitarti il lavoro.
Anche il left è solo x abitudine, se li sposti a dx va bene uguale, io scrivo così perchè si comincia a leggere da sx non perchè ci sia un reale motivo..
Attributi nativi: position:relative
Io ho preso quest'abitudine, non scrivere codice "doppio", cioè il blocco, o div, nasce già con questa caratteristica.
Bye

[gengix]

Attributi nativi: position:relative
Io ho preso quest'abitudine, non scrivere codice "doppio", cioè il blocco, o div, nasce già con questa caratteristica.

Quello che dici non è corretto.
Il div in condizione normale ha un posizionamento statico (static).
Il position relative non è una condizione normale anche se l'elemento occupa di base la posizione e lo spazio che avrebbe occupato normalmente.
Infatti quando hai un elemento in posizionato in modo assoluto devi definire una posizione relativa al genitore. Diversamente avrai delle brutte sorprese.

[cerba]

Caro Ciro è vero, mi sono allargato un pò..

[rrobalzi]

Originariamente inviato da cerba

Cambiato da classi a blocchi,Testato su IE e FF

Su IE quale? Io ho una situazione uguale e su IE6 non funziona (metto tutto uno sotto l'altro), mentre su Firefox sì.

[rrobalzi]

Trovato, mettevo i div dentro una tabella e creava problemi.