title: Inconsistent display on IE & Firefox
body: <p>I'm using <code>Bootstrap</code> on my website project. I'm through with the design but the items are displayed out of place on <strong>IE</strong> &amp; <strong>Firefox</strong>. The same page renders great on <strong>Chrome</strong>. </p>
  
  <p>I used developer tools on the three browsers to make sure there was no difference in the CSS properties. </p>
  
  <p>Using developer tools I then tweaked the width of the div to > <code>33%</code> to see it being rendered properly in 2 column format on all browsers. Originally the div derives the width <code>25%</code> using <code>.col-sm-3</code> from <code>bootstrap.min.css</code>.</p>
  
  <p>Can anybody suggest any fix for displaying four items in a row as desired? The screenshots from each of the browsers follow -</p>
  
  <p><img src="https://i.stack.imgur.com/URfmo.png" alt="IE Render" title="IE Render">
  <img src="https://i.stack.imgur.com/6fAw5.png" alt="Firefox Render" title="Firefox Render">
  <img src="https://i.stack.imgur.com/YkCUx.png" alt="Chrome Render" title="Chrome Render"></p>
  
  <p>And the code -</p>
  
  <p><strong>HTML Markup</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;link rel="icon" href="../../favicon.ico"&gt;
  
      &lt;title&gt;Project Name&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/custom.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- Fixed navbar --&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Project Name&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-3 col-md-2 sidebar"&gt;
            &lt;ul class="nav nav-sidebar"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Categories&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav nav-sidebar"&gt;
              &lt;li&gt;&lt;a href=""&gt;Nav item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Nav item again&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;One more nav&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Another nav item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;More navigation&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav nav-sidebar"&gt;
              &lt;li&gt;&lt;a href=""&gt;Nav item again&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;One more nav&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Another nav item&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"&gt;
  &lt;!--            &lt;h3 class="page-header"&gt;Patterns &lt;small&gt;Please make a selection from the below options&lt;/small&gt;&lt;/h3&gt;--&gt;
              &lt;ol class="breadcrumb"&gt;
                &lt;li class="active"&gt;Patterns&lt;/li&gt;
              &lt;/ol&gt;            
  
            &lt;div class="row placeholders"&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/desk_138_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 1&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/DSF9649_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 2&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/GersTable_0011_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 3&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 4&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 4&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;              
              &lt;/div&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 4&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;              
              &lt;/div&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 4&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;              
              &lt;/div&gt;
              &lt;div class="col-xs-6 col-sm-3 placeholder"&gt;
                &lt;img src="images/GrandT_0004_large.jpg" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
                &lt;h4&gt;Pattern 4&lt;/h4&gt;
                &lt;span class="text-muted"&gt;Something else&lt;/span&gt;              
              &lt;/div&gt;              
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer class="footer"&gt;
          &lt;div class="container"&gt;
              &lt;p class="text-muted"&gt;&amp;copy; 2015 -  All Rights Reserved.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/core.js"&gt;&lt;/script&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the <strong>CSS</strong></p>
  
  <pre><code>body {
      padding-top: 50px;
  }
  
  /*
   * Global add-ons
   */
  
  .sub-header {
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
  }
  
  /*
   * Sidebar
   */
  
  /* Hide for mobile, show later */
  .sidebar {
      display: none;
  }
  @media (min-width: 768px) {
      .sidebar {
          position: fixed;
          top: 51px;
          bottom: 0;
          left: 0;
          z-index: 10;
          display: block;
          padding: 20px;
          overflow-x: hidden;
          overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
          background-color: #f5f5f5;
          border-right: 1px solid #eee;
      }
  }
  
  /* Sidebar navigation */
  .nav-sidebar {
      margin-right: -21px; /* 20px padding + 1px border */
      margin-bottom: 20px;
      margin-left: -20px;
  }
  .nav-sidebar &gt; li &gt; a {
      padding-right: 20px;
      padding-left: 20px;
  }
  .nav-sidebar &gt; .active &gt; a,
  .nav-sidebar &gt; .active &gt; a:hover,
  .nav-sidebar &gt; .active &gt; a:focus {
      color: #fff;
      background-color: #428bca;
  }
  
  
  /*
   * Main content
   */
  
  .main {
      padding: 20px;
  }
  @media (min-width: 768px) {
      .main {
          padding-right: 40px;
          padding-left: 40px;
      }
  }
  .main .page-header {
      margin-top: 0;
  }
  
  
  /*
   * Placeholder dashboard ideas
   */
  
  .placeholders {
      margin-bottom: 30px;
      text-align: center;
  }
  .placeholders h4 {
      margin-bottom: 0;
  }
  .placeholder {
      margin-bottom: 20px;
  }
  .placeholder img {
      display: inline-block;
      border-radius: 10%;
  }
  
  /* Footer display CSS */
  
  .footer{
      position:fixed;
      bottom:0;
      width:100%;
      height:60px;
      background-color:rgba(245,245,245, 0.9);
      z-index: 20;
  }
  
  .container .text-muted{
      margin:20px 0
  }
  
  .footer&gt;.container{
      padding-right:15px;
      padding-left:15px
  }
  </code></pre>
  
  <p>For what its worth - I'm using IE 11, Firefox 38.0.5, Chrome 43 (64-bit) on Win8.1. Can anybody please suggest a possible fix for this?</p>
  
  <p><strong>EDIT:</strong> Adding <code>&lt;div class="clearfix"&gt;&lt;/div&gt;</code> fixed the issue. I added it after the four items of the first row.</p>