Inserisci la linea di divisori verticali tra due div nidificati, non a tutta altezza

Question

Ho float sinistro e galleggiante a destra <div> nidificato all'interno di una divisione azzurra come mostrato nell'immagine sottostante. Non riesco a capire come inserire una linea verticale tra loro come mostrato in questa immagine:

Che ha le seguenti proprietà:

1) imbottitura/margine su entrambi i lati che posso controllare o sembrare ragionevole (cioè non molto più vicino a un Div di quanto non sia l'altro)

2) Lascia un margine sopra e sotto come mostrato, IE non estende la larghezza verticale completa di div azzurro

3) Mantiene dinamicamente n. 1 e #2 poiché la finestra del browser diventa più grande/più piccola e la dimensione della scatola blu aumenta/diminuisce con esso

Sto cercando una soluzione semplice, preferibilmente solo CSS.

CSS rilevante:

#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

Usa un div per il tuo divisore. Sarà sempre centrato verticalmente indipendentemente dal fatto che i div sinistro e destro siano uguali in altezza. Puoi riutilizzarlo ovunque sul tuo sito.

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

Controllare l'esempio di lavoro su http://jsfiddle.net/gtkbs/

Answer 2

Prova questo. Ho impostato la scatola blu su galleggiante a destra, ho dato a sinistra e a destra un'altezza fissa e ho aggiunto un bordo bianco sulla destra del div sinistro. Aggiunti anche angoli arrotondati per abbinare di più il tuo esempio (questi non funzionano in IE 8 o meno). Ho anche tirato fuori la posizione: relativo. Non ne hai bisogno. Gli elementi a livello di blocco sono impostati sulla posizione relativa per impostazione predefinita.

Vedilo qui: 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

Non riesco a pensare a solo una soluzione CSS, ma non si può solo avere un div tra quei 2 e impostare nel CSS le proprietà per sembrare una linea come mostrata nell'immagine? Se stai usando i div come erano celle da tavolo, questa è una soluzione piuttosto semplice al problema