title: I can't manage positioning of divs in css and html
body: <p>i'm creating a website and adding divs. the problem is my main div, which is container, is not following the number of divs inside of it. the divs inside it keeps on overlapping on to it and do not follow container. help me find the problem. thanks.
  below is my code:</p>
  
  <p>for my css:</p>
  
  <pre><code>.container{
  position: relative;
  height: 100%;
  
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  background-color: #fff;
  -moz-box-shadow:    0px 0px 6px 7px #ccc;
  -webkit-box-shadow: 0px 0px 6px 7px #ccc;
  box-shadow:         0px 0px 6px 7px #ccc;
  
  }
  
  .cities{
  position: relative;
  top: 110px;
  
  }
  
  .top{
  position: relative; 
  top: 120px; left: 25px;
  max-width: 500px;
  }
  </code></pre>
  
  <p>for my html:</p>
  
  <pre><code>        &lt;div class="container" &gt;
  
              &lt;div class="cities"&gt;
                  &lt;p style="font-weight: bold; font-size: 18px;"&gt;Kwiktable Makati
                  &lt;a href="#" style="color: black; float: right; margin-right: 5px; "&gt;Mandaluyong &lt;/a&gt; &lt;a href="#"style="color: black;float: right;margin-right: 5px; "&gt;Pasig &lt;/a&gt; &lt;a href="#"style="color: black;float: right;margin-right: 5px; "&gt;Quezon city &lt;/a&gt; &lt;a href="#"style="color: black;float: right;margin-right: 5px; "&gt;Taguig &lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
                  &lt;hr style="position: relative; top: 120px; width: 1060px; margin-right: auto; margin-left: auto;"&gt;
              &lt;div class="top"&gt;
                  &lt;?php include'content1.html';?&gt;
              &lt;/div&gt;
              &lt;hr class="middle" style="position: relative; top: -300px;"/&gt;
              &lt;div class="best"&gt;
                  &lt;h1 style="position: relative; width: 350px; left: 50px; height: 80px; color: #fff; text-shadow: 0px 0px 3px #000;"&gt;&lt;span style="position: absolute; top: 20px; left: 40px"&gt;
  
                  Kwiktable's Best!&lt;/span&gt;&lt;/h1&gt;
                  &lt;?php include'best.php';?&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>here is whats happening: <a href="http://tinypic.com/r/o69qqe/8" rel="nofollow">http://tinypic.com/r/o69qqe/8</a></p>