Me gustaría que me ayudaran a colocar 9 posiciones básicas dentro de un div dentro de un div como aparece en el ejemplo. Las 9 posiciones serían: Superior Derecho, Superior Izquierdo, Superior Centro. Centro Derecho, Centro Izquierdo, Centro Derecho. Inferior Derecho, Inferior Izquierdo, Inferior Derecho. Como los divs son de distinto tamaño y muchas veces sin especificar (algunos serán texto) supongo que tendría que ir en porcentajes. El div padre tampoco tendrá un ancho especificado pues también obedecerá a la composición de un texto. Gracias.
body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000; margin-top:0;}
#wraper{width:100%; padding-top:30px;}
.basic_unit{width:800px; height:1200px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}
.basic{width:200px; height:200px; background:yellow;}
.fixed {position:fixed;}
.top_left{ top:30; right-margin:0%;}
.top_right{ top:30px; right:0%;}
#container{overflow:hidden;display:inline-block; margin:auto;}
#wraper{text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wraper">
<div id="container">
<div class="basic fixed top_left"></div>
<div class="basic fixed top_right"></div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
</div>
</div>