title: Twitter Bootstrap Carousel Height goes to 0px and extra div appears
body: <p>I have a strange problem with Twitter Bootstrap Carousel. Please have a look at <a href="http://www.bettondesignwork.co.uk/cheapbeds4u/" rel="nofollow">http://www.bettondesignwork.co.uk/cheapbeds4u/</a></p>
  
  <p>At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .</p>
  
  <p>Actual html:</p>
  
  <pre><code>&lt;section id="top" class="container"&gt;
  &lt;div id="TopCarousel" class="moduletable carousel slide"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item"&gt;
                  &lt;img src="images/slideshow/homepage/01.jpg" alt="" /&gt;
                  &lt;div class="carousel-caption"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="images/slideshow/homepage/02.jpg" alt="" /&gt;
                  &lt;div class="carousel-caption"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="images/slideshow/homepage/03.jpg" alt="" /&gt;
                  &lt;div class="carousel-caption"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Rendered HTML:</p>
  
  <pre><code>&lt;section id="top" class="container"&gt;
  &lt;div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;"&gt;
  &lt;div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                  &lt;img src="images/slideshow/homepage/01.jpg" alt="" /&gt;
                  &lt;div class="carousel-caption"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="images/slideshow/homepage/02.jpg" alt="" /&gt;
                  &lt;div class="carousel-caption"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="images/slideshow/homepage/03.jpg" alt="" /&gt;
                  &lt;div class="carousel-caption"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated. Thank you.</p>