CSS - Auto fill width

Question

Here's a js fiddle of what I currently have, I am trying to make it so the boxes all fit within one line and there's a scrollbar that let's people scroll horizontally rather than having the boxes do what they're doing now.

Also, if anyone could get the class panel-body to fill 100% to the height of the page, that'd be awesome ;D

This is using Bootstrap 3.0.2, so the panels are pulled from that.

http://jsfiddle.net/Y55af/

Sample css:

.mainContent{
    padding:20px;
}
.workplace_outter{
    width:100%;
    overflow-x:scroll;
}
.workplace_inner{
    width:2000px;
}
.workplace_outter .panel{
    width:300px;
    margin-right:5px;
    display:inline-block;
}

Sample HTML:

<div class="mainContent">
    <div class="workplace_outter">
        <div class="workplace_inner">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Item
                </div>
                <div class="panel-body">
                    Item Body....
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I don't quite understand what you mean by "get the white portion of the boxes to fill vertically", but since the panels are already inline-block elements, you can replace the width specification on their container with white-space: nowrap which will prevent any inline or inline-block elements from wrapping onto a second line.

Here's an updated fiddle , and the relevant code changed:

.workplace_inner{
/*  width:2000px; (don't need anymore) */
    white-space: nowrap;
}