0

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;
}
bons
  • 41
  • 8

1 Answers1

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/

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • I don't understand how this solves my problem. I still end up with the third div on a separate line from the first two. I've also tried setting white-space:nowrap; in the .table-container but that doesn't help. – bons Apr 24 '12 at 14:02
  • Just saw your edit. My goal here is to not have the spans add up. I'd like a horizontal scroll bar to allow me to scroll to see the overflow. – bons Apr 24 '12 at 14:04
  • Ohh ok, in that case then we don't really need to have a span class acting as a container, is it always going to be `span12` within your table container div? – Andres I Perez Apr 24 '12 at 14:04
  • In your demo the span is set to 8. I can make that work as well but what I need is for 3 spans of 12 to be on the same line. In actuality, I have a variable number of columns and I'd like to use a horizontal scroll bar to fit within the span-24 w/o wrapping to a new line – bons Apr 24 '12 at 14:10
  • Yes, the columns are always a fixed width. Appreciate your help on this! – bons Apr 24 '12 at 14:11
  • @bons ok that makes it easier, if you're going to have three columns inside your table container always then you can just add up the width of all three `span12` classes and add it separately to your `.table-container` class and that should render scrollbar on your `span24` div, like so: http://jsfiddle.net/CbRgc/1/ – Andres I Perez Apr 24 '12 at 14:18