title: Html boxes not displaying properly
body: <p>I am trying to have two div boxes one next to each other and having the same height as a percentage so that they show correctly on two different screens with different sizes. </p>
  
  <p>The sceens appear to have different sizes when I run the code. </p>
  
  <p>Here is my code:</p>
  
  <pre><code> &lt;a href="https://unesco.csod.com/catalog/SearchAdvanced.aspx?dept_id=538"&gt;
  &lt;div style="border-radius: 25px; width: 40%; height: 56%; text-align: center; color: #ffffff; margin-left: 7%; display: inline-block; background-color: #80b280; flat: left;"&gt;&lt;strong&gt;&lt;span style="padding-top: 20px; font-size: 20px;"&gt;&lt;br /&gt;
  IT Training Resources&lt;/span&gt;&lt;br /&gt;
  &lt;/strong&gt;
  &lt;br /&gt;
  &lt;span style="font-size: 13px;"&gt;&lt;font face="Tahoma"&gt;A comprehensive resource page which includes video tutorials on a variety of Microsoft products&lt;br /&gt;
  &lt;/font&gt;
  &lt;/span&gt;&lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://unesco.csod.com/catalog/SearchAdvanced.aspx?dept_id=533"&gt;
  &lt;div style="border-radius: 25px; width: 40%; height: 56%; text-align: center; color: #ffffff; margin-right: 7%; float: right; display: inline-block; background-color: #5cadff;"&gt;&lt;strong&gt;&lt;span style="font-size: 20px; margin-top: 20%;"&gt;
  &lt;br /&gt;
  Career Tutorials Library&lt;/span&gt;
  &lt;/strong&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;span style="font-size: 13px;"&gt;&lt;font face="Tahoma"&gt;Rapid courses for all staff to move ahead in their career&lt;/font&gt;&lt;br /&gt;
  &lt;/span&gt;&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And here is a fiddle:
  <a href="http://jsfiddle.net/eKpF9/" rel="nofollow">http://jsfiddle.net/eKpF9/</a></p>