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

score 59 · Accepted Answer · answered Mar 19 '11 at 22:04

59

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/

answered Mar 19 '11 at 22:04

Hussein

42,480
25
113
143

1

Perfect! I was so close to this, just didn't think to try absolute positioning. Thanks! – Tim Koelkebeck Mar 19 '11 at 22:10
1

This rocks! So clean and simple. – duyn9uyen May 29 '15 at 18:26

score 2 · Answer 2 · answered Mar 19 '11 at 21:57

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;
}

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, Mar 19 '11 at 22:05

score 0 · Answer 3 · answered Mar 19 '11 at 21:55

0

Can't think of a only css solution, but couldn't you just had a div between those 2 and set in the css the properties to look like a line like shown in the image? If you are using divs as they were table cells this is a pretty simple solution to the problem

answered Mar 19 '11 at 21:55

John

311
4
17

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 Mar 19 '11 at 22:02
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 Mar 19 '11 at 22:03

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

3 Answers3

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