insert vertical divider line between two nested divs, not full height

Question

I have float left and float right <div> nested within a light blue box div as shown in the image below. I can't figure out how to insert a vertical line between them as shown in this image:

That has the following properties:

1) padding/margin on either side that I can control or looks reasonable (i.e. not much closer to one div than it is the other)

2) leaves a margin above and below as shown, i.e. does not extend the full vertical width of light blue div

3) dynamically maintains #1 and #2 as browser window gets bigger/smaller and blue box size increases/decreases with it

I'm looking for a simple, preferably CSS-only solution.

Relevant CSS:

#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

Use a div for your divider. It will always be centered vertically regardless to whether left and right divs are equal in height. You can reuse it anywhere on your site.

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

Check working example at http://jsfiddle.net/gtKBs/