title: Aligning Nested DIVs
body: <p>I am trying to have a group of DIVs within a webpage, and I cannot seem to get the layout like I want.  What I want is this... (no borders needed)</p>
  
  <p><a href="https://i.stack.imgur.com/FqFow.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FqFow.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my code...</p>
  
  <pre><code>&lt;div id='participation_All'  style="height:100%"&gt;
      &lt;div id='participation_Left' style="width: 100%; min-height: 600px"&gt; 
  
      &lt;div id='part_bargauge' style='float: left; width: 70%'&gt;&lt;/div&gt;     
      &lt;div id='part_listbox'&gt;&lt;/div&gt;
  
     &lt;/div&gt;
  &lt;div id='participation_Right' style="width: 100%; min-height: 600px"&gt; 
      &lt;/div&gt;
  
  &lt;/div&gt;  
  </code></pre>
  
  <p>The problem is the part_Listbox is NOT showing up where I need it.  Instead, it is showing up on the left of the screen, below part_All.  Any idea what I am doing wrong?  </p>