1

I've been trying all day to get a container to display its content in the form of columns and expand towards the side instead of down when the number of children div's increases. I've tried everything from -vendor-box-orient layout to inline-block, nothing seems to be working. Here is the use case.

<div class="container">
    <div class="row">
        <div class="item">
        </div>
        <div class="item">
        </div>
    </div>
</div>

The .container is supposed to be overflow-x:scroll while .row is supposed to exceed .container if it has enough children to do so, instead of leaving overflow visible. So, how can I get .row to collapse to the width of its collective children as it would work if it was vertical?

Use case: JSfiddle

TERMtm
  • 1,903
  • 3
  • 23
  • 29

2 Answers2

3

Looking at your fiddle demo, I found this answer by ThirtyDot (fiddle here) and adapted to do the same thing for right-flowing content to be right-fitted. I'm not entirely I got the scroll feature right, but let me know. This should work with elements other than UL and LI as well, but I haven't modified the markup to check yet.

Of course, this uses the weird and wonderful display: table- properties. Doing that, it was bound not to be supported by some legacy browser. See When Can I Use? for details on support.

I tested the following:

Firefox 13 - Works
Chrome Latest - Works
Opera 11.67 - Works
IE 8 - Works
IE 9 - Works
IE 7 - Does NOT Work
Safari - Untested

So if IE7 support is critical, this won't work for that browser at least. But unless I've misunderstood something, it works great in all the others.

Markup

<div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
</div>

CSS

.super-scroller {
    border: 1px solid green;
    overflow-x: scroll;
    padding: 5px;
    margin: 10px auto;
    width: 90%;
}
.horizontal-fit {
    display: table;
    border: 1px solid blue;
}
.horizontal-fit .outer-block {
    display: table-cell;
}
.horizontal-fit .inner-block {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 5px;
    width: 100px;
    height: 100px;
}

http://jsfiddle.net/suJ3d/2/

Interactive demo:

http://jsfiddle.net/userdude/suJ3d/5/embedded/result/

Community
  • 1
  • 1
Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • I like how I stupidly forget it only for iPad and you got out of your way to test every browser sans target. Sorry 'bout that... – TERMtm Jun 23 '12 at 05:55
  • 1
    Oh. So does it work in the iPad? I don't have one. It works in Chrome! (I can't get Safari to run on my computer, it refuses and pouts in the corner.) – Jared Farrish Jun 23 '12 at 05:58
  • safari, mob safari and chrome all use webkit so it's no prob. Testing though. – TERMtm Jun 23 '12 at 05:59
  • Good idea using real tables. I guess my brain removed them from cache when it loaded HTML5. – TERMtm Jun 23 '12 at 06:00
  • I'm not quite sure what the brain and cache bit meant in that last comment... I put together a [super nifty interactive demo](http://jsfiddle.net/userdude/suJ3d/4/embedded/result/) which also shows the somewhat-interesting thing it does when you apply `margin: auto` to the fitting parent. – Jared Farrish Jun 23 '12 at 06:18
  • Sorry, literally forgot so much legacy stuff I thought that was a table for a second. List idea superb, thanks. BTW that last comment was a joke. – TERMtm Jun 23 '12 at 07:44
  • TABLE is a savior for so many horizontal layout issues - just be aware that it works horribly with something like jquery slideUp() because when a table's height is set it doesn't crop it - so watch out for that – Simon_Weaver Sep 15 '15 at 06:27
0

Here's a working example. The red div's move inside the blue div.

The key was 

overflow-x:scroll;
white-space: nowrap;

on the outer div and 

display:inline-block;

on the inner div

http://jsfiddle.net/WTw2P/2/