title: Positioning multiple nested divs relative to each other
body: <p>I have an outer div, divs inside the outer div and divs inside these divs too. I want to position the innermost div wrt to its parent, the middle level div wrt to its parent i.e. outermost div. For just divs inside a div we ca achieve this using relative positioning for the parent div and absolute positioning for child divs. But how do we achieve it when we have more levels of nested divs?</p>
  
  <p>I want to have predefined width for the innermost level divs and the other higher level divs should have their width and height to just fit their child divs. I have the following code, but it does not seem to work. The code is shown below:</p>
  
  <pre><code>&lt;div class='list' id='list1' style='padding: 1px; border : 5px groove; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' &gt;
  &lt;div class='tuple tuple1' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' &gt;
      &lt;div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' &gt;adasd&lt;/div&gt;
      &lt;div class='elmnt elmnt2' id='elmnt2' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' &gt;asdasd&lt;/div&gt;
      &lt;div class='elmnt elmnt3' id='elmnt3' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' &gt;asdasd&lt;/div&gt;
      &lt;div class='elmnt elmnt4' id='elmnt4' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' &gt;sadasd&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='tuple tuple2' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' &gt;
      &lt;div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' &gt;adasd&lt;/div&gt;
              &lt;div class='elmnt elmnt2' id='elmnt6' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' &gt;asdasd&lt;/div&gt;
      &lt;div class='elmnt elmnt3' id='elmnt7' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' &gt;asdasd&lt;/div&gt;
      &lt;div class='elmnt elmnt4' id='elmnt8' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' &gt;sadasd&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='tuple tuple3' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' &gt;
      &lt;div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' &gt;adasd&lt;/div&gt;
      &lt;div class='elmnt elmnt2' id='elmnt10' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' &gt;asdasd&lt;/div&gt;
      &lt;div class='elmnt elmnt3' id='elmnt11' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' &gt;asdasd&lt;/div&gt;
      &lt;div class='elmnt elmnt4' id='elmnt12' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' &gt;sadasd&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>