Visualizzazione dei risultati da 1 a 4 su 4

Discussione: float e compatibilità

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2008
    Messaggi
    1,683

    float e compatibilità

    Ciao a tutti! perchè se eseguo questo codice con firefox e con chrome il quadrato verde appare rispettivamente a destra e a sinistra?

    codice:
    <div style="width:60px; height:60px;">
    
    	<a style='width:20px; height:20px; background:green; position:absolute;'></a>
    
    	<div style='width:60px; height:60px; background:red; float:left;'></div>
    
    </div>

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    526
    Dunque... il tuo codice ha comunque degli errori o delle lacune...
    1) E' inutile specificare le dimensioni di un link che è un elemento inline se prima non lo forsi a diventare un elemento di tipo block con display:block; oppure display:inline-block;
    2) Definire il position:absolute senza specificare almeno un valore top o left (o gli opposti) non ha senso... serve solo a togliere l'oggetto dal flusso del documento ma non lo posiziona e probabilmente (non ho provato) in mancanza di informazioni precise Chrome e Firefox si inventano dove metterlo
    3) Ogni oggetto posizionato in maniera assoluta si posiziona in base al più vicino elemento padre che abbia un posizionamento dichiarato espressamente... se non ce ne è nemmeno uno... lo fa rispetto al Body. Quindi per ciò che vorresti fare tu dovresti definire il DIV più esterno come position:relative; che non fa nulla se non consentire di posizionare altri oggetti al suo interno
    4) infine... che senso ha dichiarare float un div che ha le stesse identiche dimensioni del suo contenitore?!!?!? non ha spazio per.... "floattare"!!!

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2008
    Messaggi
    1,683
    premetto che quello è una semplificazione di quello che stavo sviluppando

    1) in realtà ho messo delle dimensioni nel link perchè conteneva un immagine e per l'esempio mi sembrava di semplificare di più, comunque mettendo display:block; funziona tutto!
    2) nello stile vero e proprio ho messo un margin left e top, qua non l'ho riportato perchè a me interessava capire come mai con uno va a destra e l'altro a sinistra (coi margini cambiavano le distanze ma il punto zero era comunque diverso)
    3) il primo div dovrebbe essere quello che fa quello che intendi tu
    4) in realtà quel dei col float è una semplificazione di n div che andavano a formare una griglia

    comunque effettivamente hai ragione, mettere due elementi in un contenitore non abbastanza capiente da contenerli non è una gran furbata, comunque hai risolto, grazie infinite!

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    526
    Di nulla, però un consiglio per il futuro!
    Ottimo postare un codice semplificato... ma dev'essere completo!!! eheheheh altrimenti si rischiano i qui pro quo come in questo caso e si finisce a correggerti su aspetti che in realtà già conosci o che comunque sono lontani dalla realtà

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.