title: Google Chrome positioning issue
body: <p>I have a problem positioning some text in google chrome, I am trying to position 
  "Get Directions" and "Contact" side by side. This works fine in IE,Firefox and Opera but not Chrome. I know I should probably use floats but does anyone have any idea why isn't this working correctly?</p>
  
  <p>(CSS)</p>
  
  <pre><code>    #main_container2{
  
      background-color: white;
      position:relative;
      left: 0%;
      top:0%;
      width:950px;
      height:985px;
      font-family:arial;
      font-size:36pt;
  
  
  
      }
  </code></pre>
  
  <p>(HTML)</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd"&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href='green_machine.css'&gt;
  &lt;title&gt; test&lt;/title&gt;
  
  &lt;/head&gt;
  
  
  &lt;body bgcolor="black"&gt;
  
  &lt;div id="main_container2"&gt;
  
  &lt;p&gt;&lt;/p&gt;
  &lt;font style="position:absolute;top:5%;left:6%;"&gt;Get Directions&lt;/font&gt;&lt;p&gt;&lt;/p&gt;
  &lt;font style="position:relative;top:5%;left:56%;"&gt;Contact&lt;/font&gt;&lt;br&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>