title: Positioning div inside another div using display:inline-block css property
body: <p>I'm trying to create a theme for my project but I'm facing some problem while positioning div inside another div.</p>
  
  <p>below is the code :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          .mainDIV
          {
              width:100%;
              height:100%;
              background-color:cyan;
          }
          .header
          {
              width:100%;
              height:10%;
              background-color:yellow;
          }
          .menu
          {
              width:10%;
              height:90%;
              display:inline-block;
              background-color:black;
          }
          .content
          {
              width:80%;
              height:90%;
              background-color:blue;
              display:inline-block;
          }
          .menuItem   
          {
              width:100%;
              height:10%;
              background-color:white;
              display:inline-block;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="mainDIV"&gt;       
          &lt;div class="header"&gt;        
          &lt;/div&gt;
          &lt;div &gt;      
              &lt;div class="menu"&gt;
                  &lt;div class="menuItem"&gt;
                      I Want display content inside a DIV
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="content"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I position multile div. I'm using display:inline-block css property.</p>