Salve
Il mio problema e di rendere graficamente una soluzione simile a questa
https://wireframe.cc/pRzmkQ
Cioè ottenere quei tre box centrati nella pagina con una dimensione che si adatti in modo proporzionale alla pagina.
Ho letto che una soluzione è quella di usare la proprietà flex-box e inserire i 3 div in question in un div container, ma come posso ottenere lo stesso risultato utilizzando i float?
Perché non vuoi utilizzare i float? Perché dopo ti si sfasa il footer?? (presumo che venga a sovrapporsi ai 3 div)
Se è cosi prova ad inserire un div vuoto sotto questi tre con la proprietà clear: both.
Se proprio non vuoi usare il float metti a i tre div la proprietà display: inline-block
Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?
Non uso i float perchè non riesco a rendere fluidi i 3 box flottante cioè vorrei che avessero dimensioni uguali calcolate in base alla dimensione disponibile ed equamente spazianti e centrati.
Bisogna fare un po' di conti, calcolatrice alla mano. Stabilite le dimensioni che devono avere i tre box, il restante spazio può essere attribuito ai margini (con aggiustamenti quando si ottengono troppi valori decimali).
Per esempio:
codice:<style type="text/css"> <!-- #threeColumns { background-color: yellow; overflow:hidden; } #first, #second, #third{ background-color: green; float:left; margin:0 4.17%; height:200px; width:25%; } #second{ margin:0 4.16%; } --> </style> </head> <body> <div id="threeColumns"> <div id="first">colonna1</div> <div id="second">colonna2</div> <div id="third">colonna3</div> </div> </body> </html>
Rispondi quotando
