Cómo hacer una línea vertical en HTML

Puede utilizar la etiqueta de regla horizontal para crear líneas verticales.

Al utilizar un ancho mínimo y un tamaño grande, la regla horizontal se convierte en una vertical.

Puedes usar un

vacío que esté estilizado exactamente como quieres que aparezca la línea:

HTML:

Con altura exacta (anulando el estilo en línea):

  div.vertical-line{
      width: 1px; /* Ancho de la línea */
      background-color: black; /* Color de la línea */
      height: 100%; /* Anular en línea si quieres altura específica */
      float: left; /* Hace que la línea flote a la izquierda del contenido. 
        Puedes usar en su lugar position:absolute o display:inline-block
        si esto encaja mejor con tu diseño */
    }

Estiliza el borde si quieres un aspecto 3D:

    div.vertical-line{
      width: 0px; /* Solo usar estilo de borde */
      height: 100%;
      float: left; 
      border: 1px inset; /* Este es el estilo de borde predeterminado para la etiqueta  */
    }

También puedes experimentar con combinaciones avanzadas:

  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }

No hay un equivalente vertical para el elemento

. Sin embargo, un enfoque que puedes probar es usar un borde simple a la izquierda o derecha de lo que estás separando:

#your_col {
  border-left: 1px solid black;
}

  Tu contenido aquí

Otra opción es usar una imagen de 1 píxel y establecer la altura; esta opción te permitiría flotarla donde necesitas que esté.

No es la solución más elegante, sin embargo.