title: how to align divs vertically in html and css?
body: <p>I have the following html divs :</p>
  
  <pre><code>...
  &lt;body&gt;
  &lt;div id="barChart_div" style="width: 600px; height: 250px;float:left; "&gt;&lt;/div&gt;
  &lt;div id="stats_div" style="width: 350px; height: 250px; float:left;"&gt;&lt;/div&gt;
  &lt;div id="lineChart_div" style="width: 600px; height: 250px; "&gt;&lt;/div&gt;
  &lt;div id="cdfChart_div" style="width: 600px; height: 250px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  ...
  </code></pre>
  
  <p>what I am trying to do is to display the first div ( contains a bar chart) and the second div(contains some text fro the chart) next to each other, then below them display the other two divs (contain other charts) one after the other vertically i.e. I want it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/uOqyw.png" alt="desired"></p>
  
  <p>and what i get currently is :</p>
  
  <p><img src="https://i.stack.imgur.com/9A84K.png" alt="actual"></p>
  
  <p>cdfChart_div (div4) is getting displayed on top of lineChart_div(div3).
  What CSS style do i need to use to fix this?</p>