title: CSS Inline-Block Scroll side ways
body: <p>i'm trying to use CSS to make this code work in any horizontal measure. Like <a href="https://stackoverflow.com/questions/11209367/horizontal-scrolling-with-inline-block-working-in-firefox-but-not-in-chrome#">Horizontal Scrolling with Inline Block Working in Firefox</a>, i've been unsucessful.</p>
  
  <p>My code is ready and gives me the visuals i want, but when we zoom the page or use it in a smaller horizontal size, instead of adding a horizontal scroll bar, it breaks down.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Gantt Display&lt;/title&gt;
  &lt;style&gt;
      body {font-family:Verdana;font-size:10px;}
      .gantt {overflow-x:auto;overflow-y:hidden;background-color:#ffffff;font-size:0;}
      .gantt .head {display:block;}
      .gantt .head .text {height:32px;display:block;text-align:center;font-weight:bold;background-color:#eeeeee;vertical-align:middle;font-size:10px;}
      .gantt .head .month {display:inline-block;border-bottom:1px solid #eeeeee;}
      .gantt .head .day {display:inline-block;width:32px;height:32px;text-align:center;background-color:#f8f8f8;margin:0;padding:0;vertical-align:middle;font-size:10px;}
      .gantt .head .weekend {display:inline-block;width:32px;height:32px;text-align:center;background-color:#eeeeee;margin:0;padding:0;vertical-align:middle;font-size:10px;}
      .gantt .chart {display:block;}
      .gantt .chart .day {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#f8f8f8;margin:0;padding:0;}
      .gantt .chart .weekend {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#eeeeee;margin:0;padding:0;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="gantt"&gt;
      &lt;div class="head"&gt;
          &lt;div class="month"&gt;
              &lt;div class="text"&gt;Setembro&lt;/div&gt;
              &lt;div class="day"&gt;19&lt;/div&gt;
              &lt;div class="day"&gt;20&lt;/div&gt;
              &lt;div class="day"&gt;21&lt;/div&gt;
              &lt;div class="day"&gt;22&lt;/div&gt;
              &lt;div class="day"&gt;23&lt;/div&gt;
              &lt;div class="weekend"&gt;S&lt;/div&gt;
              &lt;div class="weekend"&gt;D&lt;/div&gt;
              &lt;div class="day"&gt;26&lt;/div&gt;
              &lt;div class="day"&gt;27&lt;/div&gt;
              &lt;div class="day"&gt;28&lt;/div&gt;
              &lt;div class="day"&gt;29&lt;/div&gt;
              &lt;div class="day"&gt;30&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="month"&gt;
              &lt;div class="text"&gt;Outubro&lt;/div&gt;
              &lt;div class="weekend"&gt;S&lt;/div&gt;
              &lt;div class="weekend"&gt;D&lt;/div&gt;
              &lt;div class="day"&gt;3&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="chart"&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="weekend"&gt;&lt;/div&gt;
          &lt;div class="weekend"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
          &lt;div class="weekend"&gt;&lt;/div&gt;
          &lt;div class="weekend"&gt;&lt;/div&gt;
          &lt;div class="day"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>EDITED THIS: answered!</strong>
  And also, i'd like to understand why are spaces between the "vertical day bars" if "margin" and "padding" are both set to zero?</p>
  
  <p><strong>EDITED: Show the print screens of the problem</strong>
  That code, that's almost as i want, leaves me with this "resize" problem:</p>
  
  <p>Correct Page (when the page width allows the hole page to be displayed)
  <a href="https://i.stack.imgur.com/n7DWc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n7DWc.png" alt="correct page"></a></p>
  
  <p>Deformed Page (when ... not)
  <a href="https://i.stack.imgur.com/ZgriG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZgriG.png" alt="deformed page"></a></p>