title: Issue with main Menu item moving to the right
body: <p>I have created a simple 2 step accordion: <a href="http://jsfiddle.net/oampz/36ULG/1/" rel="nofollow">http://jsfiddle.net/oampz/36ULG/1/</a></p>
  
  <p>I am experiences 2 issues:</p>
  
  <p>1) I cant seem to get 'Menu 2' heading to appear directly below 'Menu 1'</p>
  
  <p>2) When i click on 'Menu 2' heading, it moves to the top right</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;div class="heading"&gt;   &lt;a&gt;Menu 1&lt;/a&gt;
  
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;ul&gt;
                      &lt;h2&gt;Top Ten Questions&lt;/h2&gt;
  
                  &lt;li&gt;    &lt;a href=""&gt;How to reach us&lt;/a&gt;
  
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    &lt;a href=""&gt;How to email us&lt;/a&gt;
  
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    &lt;a href=""&gt;Contact Number&lt;/a&gt;
  
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="heading"&gt;   &lt;a&gt;Menu 2&lt;/a&gt;
  
          &lt;/div&gt;
          &lt;div class="content hide"&gt;
              &lt;ul&gt;
                      &lt;h2&gt;Products&lt;/h2&gt;
  
                  &lt;li&gt;    &lt;a href=""&gt;Tabels&lt;/a&gt;
  
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    &lt;a href=""&gt;Ladders&lt;/a&gt;
  
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    &lt;a href=""&gt;Chairs&lt;/a&gt;
  
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.heading {
      color: white;
      font-weight: bold;
      padding: 15px 0 15px 20px;
      background: grey;
      width: 100%;
  }
  @media (min-width: 700px) {
      .heading {
          float: left;
          width: 35%;
      }
  }
  .content {
      padding-top: 10px;
      padding-left: 10px;
      width: 100%;
  }
  @media (min-width: 700px) {
      .content {
          float: left;
          margin-left: 35%;
          margin-top: -53px;
          width: 65%;
      }
  }
  .hide {
      display: none;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(".heading").click(function () {
      var $this = $(this);
      $this.next(".content").show(400);
      $this.parent().siblings().children().next().hide();
      return false;
  });
  </code></pre>
  
  <p>Its important to note that the heading and content need to be below each other when the media queries are triggered on minimizing the browser.</p>
  
  <p>Is some sort of clearfix needed?</p>
  
  <p>Any help appreciated.</p>
  
  <p><strong>UPDATE</strong> <em><strong></em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>****</strong></p>
  
  <p>Here's an updated fiddle <a href="http://jsfiddle.net/oampz/36ULG/4/" rel="nofollow">http://jsfiddle.net/oampz/36ULG/4/</a> where i have added more Menu items (3 and 4).. Hopefully this should show how the the main menus are not appear below each other.</p>
  
  <p><strong>UPDATE</strong> <em><strong></em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>****</strong></p>
  
  <p>Just done some reading on floats and clear, i've added clear: both; to the media query of .heading.. Some minor improvements that some of the Menu items are stacked below eachother, but there is a large gap between Menu's say if Menu 3 is selected you can see the gap to Menu 4. Updated fiddle: <a href="http://jsfiddle.net/oampz/36ULG/5/" rel="nofollow">http://jsfiddle.net/oampz/36ULG/5/</a></p>