Вставить вертикальную разделительную линию между двумя вложенными div, не полной высотой

У меня есть float left и float right <div>, вложенный в голубой сингл div, как показано на изображении ниже. Я не могу понять, как вставить вертикальную линию между ними, как показано на этом изображении:

Он обладает следующими свойствами:

1) заполнение/маржа с обеих сторон, которые я могу контролировать или выглядеть разумно (т.е. не намного ближе к одному div, чем другому)

2) оставляет край выше и ниже, как показано, т.е. не увеличивает полную вертикальную ширину синего div

3) динамически поддерживает # 1 и # 2, когда окно браузера становится больше/меньше, а размер синего квадрата увеличивается/уменьшается с ним

Я ищу простое, желательно CSS-единственное решение.

Соответствующий 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*/
}

Ответы

Ответ 1

Используйте div для вашего разделителя. Он всегда будет центрироваться по вертикали независимо от того, равны ли левые и правые divs по высоте. Вы можете использовать его в любом месте вашего сайта.

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

Проверьте рабочий пример http://jsfiddle.net/gtKBs/

Ответ 2

Попробуйте это. Я установил синюю рамку, чтобы плавать вправо, давая левую и правую фиксированную высоту и добавив белую границу справа от левого div. Также добавлены закругленные углы, чтобы больше соответствовать вашему примеру (они не будут работать, например, 8 или менее). Я также занял позицию: родственник. Вам это не нужно. Элементы уровня блока устанавливаются по умолчанию по умолчанию.

Смотрите здесь: 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;
}

Ответ 3

Нельзя думать о единственном решении css, но разве у вас не могло быть div между этими 2 и установить в css свойства, чтобы они выглядели как строка, показанная на изображении? Если вы используете divs, поскольку они являются ячейками таблицы, это довольно простое решение проблемы.