Solving the world's HTML problems one by one

This is something that is often useful when you have two embedded divisions. You set the parent width in percentage, and want the inner div to spread out automatically up the parent's size with some margin around it to create a nice border effect.

I journeyed across seas and mountains to query the Great Html Oracle Spirit and I bring back two solutions :

 The "Absolute" Solution

Use position:absolute and do not specify any width and height. However specify top:20px; left:20px; right:20px; botton:20px; !

<div id="rich-text-editor" style="position:absolute; z-index:6; top:40px; left:40px; width:80%; height:90%; background-color:gray; border-radius:20px;">
 <div style="position:absolute; top:20px; left:20px; right:20px; bottom:20px; background-color:black; border-radius:10px; ">
 </div>
</div>

 The "Border" Solution

Use a single division with fat borders of several pixels. You can even make those borders rounded using CSS ! However compared to the solution above, you could just have the outer border rounded : the inner border will be squared.

<div id="rich-text-editor" style="position:absolute; z-index:6; top:40px; left:40px; width:80%; height:90%; background-color:black; border:15px solid gray; border-radius:10px; "> stuff here </div>