Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Posizionamento DIV

  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2020
    Messaggi
    0

    Posizionamento DIV

    Ciao a tutti, sicuramente sto annegando in un bicchiere d'acqua ma proprio non riesco a posizionare correttamente i div nella mia pagina. Cerco di spiegare al meglio il problema:

    Ho 3 DIV come nella seguente immagine:
    div-pos.png

    i blocchi "sidebar"(verde) e "Loop"(rosso) hanno lunghezza variabile, e voglio che il blocco "footer"(blu) non si sovrapponga a nessuno dei due blocchi sopra.

    Il codice che ho scritto è il seguente:

    codice:
    <!DOCTYPE html><html>
    <head>
    <style>
    
    
    .sidebar{
    background-color: green;
    width: 100px;
    height: 100px;
    position: absolute;
    }
    
    
    .archive-loop{
    background-color: red;
    margin-left: 110px;
    width: 200px;
    height: 50px;
    }
    
    
    .footer{
    background-color: blue;
    margin-top: 10px;
    width:310px;
    margin-top: 10px;
    }
    
    
    </style>
    </head>
    <body>
    
    
    <div class="container-box">
    <div class="sidebar">Sidebar</div>
    <div class="archive-loop">Loop</div>
    </div>
    <div class="footer">Footer</div>
    
    
    </body>
    </html>
    ma il footer continua a sovrapporsi alla sidebar se il loop è più corto. Non riesco a trovare soluzione da nessuna parte. Come posso risolvere?
    Grazie mille!

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,591
    Ciao, il problema dipende da quel position:absolute che stai applicando a .sidebar. In questo modo l'elemento viene tolto fuori dal normale flusso dei contenuti.

    Si può risolvere in vari modi ma attualmente una soluzione semplice può essere l'uso di flexbox. Questo ti permette di facilitare l'impostazione per l'impaginazione dei contenuti.

    Prova ad impostare il CSS in questo modo:
    codice:
    .container-box{
       display: flex;
    }
    
    .sidebar{
       background-color: green;
       width: 100px;
       height: 100px;
    }
    
    .archive-loop{
       background-color: red;
       margin-left: 10px;
       width: 200px;
       height: 50px;
    }
    
    .footer{
       background-color: blue;
       margin-top: 10px;
       width:310px;
    }
    Sostanzialmente ho applicato display:flex a .container-box, ho tolto position:absolute da .sidebar e ho aggiustato il margin-left di .archive-loop

    Per maggiori informazioni sull'uso di flexbox puoi dare uno sguardo al capitolo 9 dei link utili CSS.

    Buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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 © 2020 vBulletin Solutions, Inc. All rights reserved.