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/