title: div elements overlapping instead of aligning vertically
body: <p>I want a div element's top margin to match with the bottom of another, how can I do this?</p>
  
  <p>Can I do it without using tables?</p>
  
  <pre><code>&lt;div style="text-align:left; position:absolute; left:12%;"&gt;
  &lt;input type="checkbox" name="acceptance" value="I have read and agree with the terms and conditions."&gt;
  &lt;label style="text-align:left; color:yellowgreen ;font-size:27px ;font-family:cursive;font-style:italic;"&gt;I have read and agree with the terms and conditions&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div style="text-align:center; width = 100%;"&gt;
  &lt;a href="i-hm-p.html";&gt;&lt;img border="0"  src="images/imappyenter.png" width="100px"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please ignore my bad formatting, I'm editing someone else's code as well as learning CSS.</p>
  
  <p>What I want to do is I want to place a checkbox at 12% of total width in a line, and a short explanation for it immediately after. I've placed both in one div element.</p>
  
  <p>In another div element, I've placed a link wrapped in an image, which I want to align centrally while not being in the same line as the checkbox and its visible explanation.</p>
  
  <p>How can I do this?</p>