html - una - inserte la línea divisoria vertical entre dos divs anidados, no altura completa

separador html

Question

He flotado a la izquierda y flotado a la derecha <div> anidado dentro de una caja azul clara div, como se muestra en la imagen de abajo. No puedo imaginar cómo insertar una línea vertical entre ellos como se muestra en esta imagen:

Que tiene las siguientes propiedades:

1) Relleno / margen en cualquiera de los lados que puedo controlar o parece razonable (es decir, no mucho más cerca de un div que de otro)

2) deja un margen arriba y abajo como se muestra, es decir, no extiende el ancho vertical completo de div azul claro

3) mantiene dinámicamente el # 1 y el # 2 a medida que la ventana del navegador se hace más grande / más pequeña y el tamaño de la caja azul aumenta / disminuye con ella

Estoy buscando una solución simple, preferiblemente solo para CSS.

CSS relevante:

#left {
  position: relative;
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
}

#blue_box {
  position: relative;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  margin-left: 40%;
  overflow: auto; /*needed so that div stretches with child divs*/
}

Answer 1

No puedo pensar en una única solución de css, pero ¿no pudiste tener un div entre esos 2 y configurar en css las propiedades para que se vean como una línea como la que se muestra en la imagen? Si está usando divs como si fueran celdas de tabla, esta es una solución bastante simple para el problema

Answer 2

Prueba esto. Puse la caja azul para que flotara a la derecha, di a izquierda y derecha una altura fija, y agregué un borde blanco a la derecha del div izquierdo. También se agregaron esquinas redondeadas para que coincidan más con su ejemplo (no funcionarán en ie 8 o menos). También saqué la posición: relativa. No lo necesitas. Los elementos de nivel de bloque se establecen en posición relativa de forma predeterminada.

Véalo aquí: http://jsfiddle.net/ZSgLJ/

#left {
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
  border-right: 1px solid white;
  height:400px;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
  height:400px;
}

#blue_box {
  background-color:blue;
  border-radius: 10px;
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  float: right;
}

Answer 3

Usa un div para tu divisor. Siempre se centrará verticalmente independientemente de si los divs izquierdo y derecho son iguales en altura. Puedes reutilizarlo en cualquier parte de tu sitio.

.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;
}

Ver ejemplo de trabajo en http://jsfiddle.net/gtKBs/