Border-right e div per due colonne

di java999 il
2 risposte
Pochi posts
Iscritto da
nov, 2017
Messaggi
41
Buonasera a tutti,
ho creato una pagina web, composta da due colonne, tramite div: 

<div id="container">
  <div id="navbar">Navigation</div>
  <div id="content">Content here</div>
</div>
il suo css è il seguente: 

#navbar {
  float: left;
  width: 20%;
}

#content {
  float: left ;
  width: 80% ;
}
il problema sorge quando voglio mettere un bordo fra i due div, quindi aggiungendo un border-right al primo div oppure un border-left al secondo div, con la seguente sintassi: 

border-right: 1px solid black ;
il secondo div mi va a capo, invece di rimanere affiancato al primo.
Come mai?
Grazie.

2 Risposte

  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Penso dipenda dal fatto che che sia #navbar che #content hanno box-model di default su content-box e non su border-box, potresti utilizzare display:flex su #container cosi rimuovi anche i float che oltre ad essere obsoleti sono anche pericolosi nell'utilizzo.

    a titolo d'esempio:
    
 #container {
            display: flex;
        }

        #navbar {
            width: 20%;
            border-right: 1px solid black;
        }

        #content {
            width: 80%;
            border-right: 1px solid black; 
        }
Devi accedere o registrarti per scrivere nel forum
2 risposte