Place divs next to each other regardless of parent width

Question

I want to place divs next to each other. I dont't know number of divs, since this is dynamically created and changed. I would like to have one parent div which will have scrollbar in case there are many child divs (and their width is greater than parent).

Here's the jsFiddle example. So, basically I would like to have all this three columns, next to each other and with scrollbar on the bottom of parent div.

HTML:

<div class="content">
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
</div>

CSS:

content {
    width: 100px;
    background- color: #355E95;  
    overflow: visible;
}

.column {
    width: 50px;
    display: inline-block;
}

Answer 1

You would need to use a content div for the scroll and then a wrapper for the columns, adjusting the width of the wrapper to fit all 3 of your columns (150px in your example).

The column structure is made by floating div's left, but it will float to the width of your parent container, in this case your parent container is only 100px so we need to add a wrapper for them to fit inside.

If you also want a vertical scroll you will need to set a height to your container.

Jsfiddle: http://jsfiddle.net/tYnH3/

css:

.content {
    width: 100px;
    background-color: #355E95;  
    overflow: auto;
}

.content-wrapper {
    width: 150px;
}

.column {
    width: 50px;
    float: left;
}

html:

<div class="content">
    <div class="content-wrapper">
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
    </div>
</div>

Answer 2

Add white-space:nowrap to your parent div.

FIDDLE