Posizionamento DIV

**benji8** · 26-03-2020, 15:02

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!

**KillerWorm** · 26-03-2020, 18:47

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

Discussione: Posizionamento DIV

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Posizionamento DIV

Permessi di invio