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:
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.
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%; }
Comments
Post a Comment