insérer la ligne de division verticale entre deux divs imbriqués, pas pleine hauteur

Question

Je flotteur gauche et le flotteur droit <div> niché dans une boîte bleu clair div comme le montre l'image ci-dessous. Je ne peux pas comprendre comment insérer une ligne verticale entre eux comme le montre cette image:

qui a les propriétés suivantes:

1) Garnissage / marge de chaque côté que je peux contrôler ou semble raisonnable (à savoir pas beaucoup plus proche d'un div que c'est l'autre)

2) laisse une marge au-dessus et au-dessous, comme indiqué, à savoir ne prolonge pas la largeur verticale pleine de div bleu clair

3) maintient dynamiquement # 1 et # 2 en tant que fenêtre de navigateur devient plus grand / plus petits et de taille boîte bleue augmente / diminue avec elle

Je suis à la recherche d'une solution simple, de préférence CSS uniquement.

CSS pertinent:

#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

Utilisez un div pour votre diviseur. Il sera toujours centré verticalement indépendamment si divs gauche et à droite sont égaux en hauteur. Vous pouvez le réutiliser partout sur votre site.

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

Vérifier exemple travailler à http://jsfiddle.net/gtKBs/

Answer 2

Essayez ceci. Je mets la boîte bleue à flotteur droit, a gauche et à droite une hauteur fixe, et a ajouté une bordure blanche sur la droite de la gauche div. On a aussi ajouté des coins arrondis à plus correspondre à votre exemple (Ceux-ci ne fonctionne pas dans IE8 ou moins). J'ai aussi pris la position: relative. Vous n'avez pas besoin. les éléments de niveau de bloc sont réglés sur la position relative par défaut.

Voir ici: 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

ne peut pas penser une seule solution css mais ne pouvait pas vous juste eu un div entre les 2 et ensemble dans les propriétés CSS pour ressembler à une ligne comme montré dans l'image? Si vous utilisez divs comme ils étaient des cellules de table c'est une solution assez simple de problème