html - How to properly add divs inside another div so the original design doesn't break? -


i have basic html:

<div id="views-container">     <div id="html-container"></div>     <div id="original-page-container"></div>     <div id="result-page-container"></div> </div> 

this css divs:

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

this final output:

enter image description here

but want add 2 divs inside

html-container

, this:

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

when this, how page rendered.

enter image description here

i want textarea inside html-content-area use width , heigth html-container. later, need hide html-content-area in order show in html-info-area.

how add divs inside html-content-area
don't break original design?

i pasted code in fiddle: http://fiddle.jshell.net/eycbb/

thanks in advance!

hope looking this

i have made changes in fiddle.

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

have http://fiddle.jshell.net/eycbb/1/


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -