[CSS]Problema con i float

[MEMon]

Ragazzi guardate questa paginetta di test: http://allejp.netsons.org/varie/test.html
se provate a ridurre la larghezza della pagina vedrete sovrapporsi i due rettangoli, come posso evitare ciò?
Ho anche messo un div con clear:both sotto ma non cambia nulla... come posso fare??

[phlebotomus]

Originariamente inviato da MEMon

se provate a ridurre la larghezza della pagina vedrete sovrapporsi i due rettangoli, come posso evitare ciò?
Ho anche messo un div con clear:both sotto ma non cambia nulla... come posso fare??

A parte che in FF2 ed IE7 il box di dx va a finire sotto a quello di sx senza sovrapporvisi (magari parli di IE6, uno dei peggiori browser al mondo - benché il più diffuso - nella gestione dei CSS)... te cosa vorresti ottenere?

[MEMon]

No scusami, intendevo proprio quel difetto, ovvero che il box blu va sotto a quello rosso, io vorrei invece che gli si affiancasse e basta

[phlebotomus]

Non capisco il senso di questi due rettangoli... in mezzo non c'è niente?

[MEMon]

Quello che voglio ottenere è avere qualcosa di fisso a sinistra(blocco rosso) e qualcosa invece che sta tutta a destra ma che se stringo la pagina si avvicina in modo da assere sempre visibile.
Solo che non voglio che mi vadi poi sotto al blocco rosso, ci si deve, al massimo, appoggiare...

[phlebotomus]

Siccome tra il box di dx e quello di sx non c'è niente (di solito nei layout a 3 colonne c'è il box principale centrale), strettendo la finestra, credo sia normale che il box di dx vada a finire sotto l'altro. E questo succede piuttosto presto perché ha una larghezza fissa (in pixel).
Prova un attimo a metterla in % (almeno quella del box di dx), tipo 50 0 60%, e guarda come ti sembra (cioè: sotto ci va cmq, ma molto dopo, strettendo la finestra...).

E' normale che il blocco blu scivoli sotto quello rosso oltre una certa larghezza della finestra in quanto i due elementi non trovano sufficiente spazio per rimanere affiancanti.

Se vuoi un layout fluido su tre colonne dovresti fare così:

<style type="text/css">

	body {
		padding:0px;
		margin:0px;
	}

	#cx {
		margin-left:100px;
		margin-right:200px;
		background:green;
	}
	
	#sx {
		position:absolute;
		top:0px;
		left:0px;
		width:100px;
		background:red;
	}
	
	#dx {
		position:absolute;
		top:0px;
		right:0px;
		width:200px;
		background:blue;
	}
	
	

</style>
 

<title></title>
</head>
<body>


	<div id="sx">&nbsp;</div>
	<div id="cx">&nbsp;</div>
	<div id="dx">&nbsp;</div>

</body>
</html>