title: How can I stop a bouncing responsive page with mixed-height, one or two-column, Bootstrap Carousel items?
body: <p>I have a simple Bootstrap Carousel at the top of a long page.  Items on the carousel are a mix of text and images and consequently are not always the same height.</p>
  
  <p>This leads to a bouncing page below the carousel.  Can you help me figure out a way to keep the responsive layout and stop the bouncing text?  I'm getting sea sick!</p>
  
  <p>The solution needs to solve the following:</p>
  
  <ol>
  <li>Stop bouncing text below the carousel</li>
  <li>Continue to allow the 2-column carousel items to be collapsed into 1-column when the responsive page is below a certain width (this means that the height of the carousel may very well double when viewed in a narrow window in one column)</li>
  </ol>
  
  <p>Fiddle: <a href="http://jsfiddle.net/PmZnh/1/" rel="nofollow">http://jsfiddle.net/PmZnh/1/</a></p>
  
  <pre><code>&lt;h1&gt;This is my carousel site&lt;/h1&gt;
  &lt;hr&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Carousel items --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;
          &lt;h2&gt;List One&lt;/h2&gt;
          &lt;ul&gt;&lt;li&gt;Item 1&lt;/li&gt;&lt;li&gt;Item 2&lt;/li&gt;&lt;li&gt;Item 3&lt;/li&gt;&lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;h2&gt;List Two&lt;/h2&gt;
          &lt;ul&gt;&lt;li&gt;Item 1&lt;/li&gt;&lt;li&gt;Item 2&lt;/li&gt;&lt;li&gt;Item 3&lt;/li&gt;&lt;li&gt;Item 4&lt;/li&gt;&lt;li&gt;Item 5&lt;/li&gt;&lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;h2&gt;List Three&lt;/h2&gt;
          &lt;ul&gt;&lt;li&gt;Item 1 is longer this time. Way longer than the first time. It just keeps going and going and going.&lt;/li&gt;&lt;li&gt;Item 2&lt;/li&gt;&lt;li&gt;Item 3&lt;/li&gt;&lt;li&gt;Getting sea sick yet?&lt;/li&gt;&lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Carousel nav --&gt;
    &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
    &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;p&gt;The rest of the text on the site shouldn't bounce and should be responsive-friendly!&lt;/p&gt;
  &lt;p&gt;1. the .items are flexible height (but usually within 10-20px)&lt;br&gt;
  2. when the page width is below 760px the list shrinks from two columns to one column, meaning the height may now be twice as tall as before.&lt;/p&gt;
  </code></pre>