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*/
}

Solution 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/

Solution 2

Try this. I set the blue box to float right, gave left and right a fixed height, and added a white border on the right of the left div. Also added rounded corners to more match your example (These won't work in ie 8 or less). I also took out the position: relative. You don't need it. Block level elements are set to position relative by default.

See it here: 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;
}

Comments

[Tim Koelkebeck]

I've been trying to insert a div between the two, but there's always a problem.. either the right div gets pushed below the left and middle div, or the margins on either side of the white line are out of whack.

[Tim Koelkebeck]

Oops, meant to go to newline.. Anyway, this is seems like it should be fairly simple but hasn't been, which made me think maybe I'm doing something wrong.

[Tim Koelkebeck]

Thanks, I will play with this and get back to you. I'd rather not set fixed heights. I do have that css for rounded corners, I was just trying to list only the code pertinent to the question. I should use jsfiddle for questions in the future, pretty nifty.

[Tim Koelkebeck]

Perfect! I was so close to this, just didn't think to try absolute positioning. Thanks!

[duyn9uyen]

This rocks! So clean and simple.