Как правильно добавить divs внутри другого div, чтобы исходный дизайн не сломался?

У меня есть этот базовый HTML:

<div id="views-container">
 
 
 
</div>

Это css для этих div:

#views-container > div{
 height:90%;
 width:33%;
 display:inline-block;
}

#html-container{
 background-color: pink;
}

#original-page-container{
 background-color: yellow;
}

#result-page-container{
 background-color: gray;
}

Это конечный результат:

Но тогда я хочу добавить два div внутри

HTML-контейнер

как это:

<div id="views-container">
 <div id="html-container">
 <div id="html-content-area">
 
 </div>
 <div id="html-info-area">
 bla bla bla
 </div>
 </div>
</div>

когда я это делаю, так выглядит страница.

Я хочу, чтобы textarea внутри html-content-area использовала всю ширину и высоту из html-контейнера. Позже мне нужно будет скрыть область html-content, чтобы показать что-то в html-info-area.

Как я могу добавить те div внутри html-content-area поэтому они не нарушают оригинальный дизайн?

Я вставил код в скрипту: http://fiddle.jshell.net/eyCbB/

Заранее спасибо!

1 ответ

Надеюсь, вы искали это

Я сделал некоторые изменения в вашей скрипке.

#views-container > div{
 height:90%;
 width:32%;
 display:inline-block;
 vertical-align:top;
}
html,body {
 width:100%;
 height:100%;
}

#views-container {
 height:100%;
}

Посмотрите http://fiddle.jshell.net/eyCbB/1/

licensed under cc by-sa 3.0 with attribution.