title: CSS/HTML positioning - Elements Overlay content
body: <p>Forgive me if my question is stupid, but I'm not a web programmer and I've spend the past 2 hours trying to figure this out.</p>
  
  <p>So, I am using Weebly for my website, and there is a "content" area where I can place elements. Then to the right and left of the "content" area, I want to place ads.</p>
  
  <p>I've figured out how to do this using absolute positioning, and it looks fine on a computer's browser, but on Mobile (Regardless of user agent used), the google adsense ads overlay my content area.</p>
  
  <p>Here is what I want it to look like: </p>
  
  <p><del>http://testing.jakaar.net/</del>    (this website is no longer in existence.</p>
  
  <p><strong>EDIT:</strong> <a href="http://android.jakaar.net/index.html" rel="nofollow">http://android.jakaar.net/index.html</a>  (this is my website, and it works now, see below for the answer to my issue).</p>
  
  <p><del>But, that does NOT work on a mobile phone. The ads still show, they just overlay.</del><br>
  <strong>EDIT:</strong> It works now, see my answer below.</p>
  
  <p>I tried using position:relative in my css to position the ads to the left and right, but then they are either above or below my content area, so it pushes everything up or down.</p>
  
  <p>Here is the CSS that I think is relevant:</p>
  
  <pre><code>body {
      background: url(bodybg.jpg) top repeat-x;
      background-color:#efefef;
      font-family: arial, sans-serif;
      font-size:12px;
      color:#666666;
      margin:0;
      padding:0;
  }
  
  #content{
      margin-left:auto;
      margin-right:auto;
      width: 898px;
      background: #fff;
      min-height: 500px;
      _height: 500px;
      padding: 32px;
  }
  </code></pre>
  
  <p>Then for the HTML:</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;{title}&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .right
  {
  position:absolute;
  right:0px;
  padding-right:80px;
  padding-left:80px;
  margin-top:180px;
  }
  .left
  {
  
  
     position:absolute;
      left:0px;
      padding-right:80px;
      padding-left:80px;
      margin-top:180px;
      }
      &lt;/style&gt;
  
  
          &lt;div id="wrapper"&gt;
              &lt;div id="header"&gt;
                  &lt;div id="headerleft"&gt;{logo max-height="60"}&lt;/div&gt;
                  &lt;div id="navigation"&gt;{menu}&lt;/div&gt;
               &lt;/div&gt;
  
              &lt;div class="right"&gt;
      //adsense add that goes on the right
      &lt;/div&gt;
      &lt;div class="left"&gt;
      //adsense add that goes on the left
      &lt;/div&gt;
  &lt;div id="content"&gt;
          {content}
          &lt;/div&gt;
  
          &lt;div id="footer"&gt;{footer}&lt;/div&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>I've also tried using <code>float:left</code> and <code>float:right</code>, but it gave the same behavior as the absolute positioning.</p>
  
  <p>Any help is greatly appreciated.</p>