Позиция и высота DIV

Question

Я иногда путаюсь с divs, когда я пытаюсь построить немного более сложную компоновку, чем обычно.

Я сделал быстрый пример, показывающий, что моя текущая проблема заключается в:

EDIT: ОБНОВЛЕНО jsFIDDLE К сожалению, это немного сумбурно, но я просто пытаюсь заставить его работать. Как вы можете видеть, я заставил высоту на одной из вертикальных линий (но это нормально, эта линия должна быть фиксированной высотой). Вертикальная линия у меня есть проблемы с это один между «картинки для загрузки» и «видео для загрузки»

http://jsfiddle.net/GLjND/

<div id="wrapper"> 
    <div id="first"></div> 
    <div id="second"></div> 
    <div id="third"></div> 
</div> 

У меня есть много Див, и я предполагаю, что моя проблема лежит в какой-то из родителей где-то , но я не могу понять это.

В принципе у меня есть обертка, и у меня есть 2 области контента. В этом примере они являются «первыми» и «третьими». «Вторая» - это вертикальная пунктирная линия, которую я хочу придерживаться между ними в областях, а высота этого div (которая содержит вертикальное пунктирное изображение с повторением-y) должна соответствовать высоте обертки, которая в поворот определяется самым большим из двух других div («первый» и «третий»).

Как мне это сделать?

Заранее благодарен! :)

Answer 1

Здесь вы идете. http://jsfiddle.net/GLjND/3/ (желтый фон просто так вы можете увидеть новый DIV)

Просто дайте дивы

display: table-cell 

и вы сделали.

Answer 2

Вот она - fiddle

<div id="wrapper"> 
    <div id="first"></div> 
    <div id="second"></div> 
    <div id="third"></div> 
</div> 

body{ 
    padding:0; 
    margin:0; 
} 

#wrapper{ 
    width:500px; 
    height:auto; 
    background:red; 
} 

#first{ 
    display: table-cell; 
    width:230px; 
    height:300px; 
    background:blue; 
} 

#second{ 
    display: table-cell; 
    background:white; 
    border-left: thick dotted #ff0000; 
} 

#third{ 
    display: table-cell; 
    width:270px; 
    height:350px; 
    background:green; 
} 

Answer 3

При использовании поплавка свойства, я рекомендую вам установить переполнение: скрытый в родительском DIV

#wrapper{ 
    overflow:hidden; 
} 

И для # Секунды у установил высота до 100%, для этого для работы u необходимо зафиксировать высоту для родительского div

#wrapper{ 
    height:400px; 
} 

Вот Jsfiddle Надеюсь, что это будет хорошим решением и станет более информативным

Answer 4

Просто дайте свойство CSS:

overflow : hidden 
display : table-cell