Question

I’m using blueprint-css and I would like to have a horizontal scroll bar in the span-24 which allows the 3 span-12 divs below show up on the same row. This seems like it should be a simple thing but I can’t get it working. The overflow-x:scroll gives me a scroll bar but the final span-12 shows up on a new line.

HTML:

<div class="span-24 table-container">
  <div class="span-12">
    Some Content
  </div>
  <div class="span-12">
    Some Content
  </div>
  <div class="span-12">
    Some Content
  </div>
</div>

CSS:

div.table-container {
  overflow-x:scroll;
}

Answer 1

With grids its always not so good to try to modify the grid layout system so i would suggest that you create a div inside your grid column instead of trying to modify the span class itself, like so:

<div class="span-24">
    <div class="table-container">
      <div class="span-12">
        Some Content
      </div>
      <div class="span-12">
        Some Content
      </div>
      <div class="span-12">
        Some Content
      </div>
    </div>
</div>

By the way, just noticed that your span classes don’t add up, 12+12+12 is 36, while your container is 24, try to lower your inner span classes to add up to 24, like so:

<div class="span-24">
    <div class="table-container">
      <div class="span-8">
        Some Content
      </div>
      <div class="span-8">
        Some Content
      </div>
      <div class="span-8 last">
        Some Content
      </div>
    </div>
</div>

Demo: http://jsfiddle.net/CbRgc/