Unable to produce horizonzal scroll with css [duplicate] - html

Question

This question already has answers here:
Horizontal scroll in DIV with many small DIV's inside (no text)
(2 answers)
Closed 9 years ago.
I have HTML structure like this :
<div class="wrapper">
<div class="fixed_column"></div>
<div class="fixed_column"></div>
<div class="fixed_column"></div>
</div>
Here is my CSS :
.wrapper{
width:500px;
float:left;
/*overflow-y:scroll;*/
overflow-x:scroll;
}
.fixed_column{
float: left;
height: 600px;
position: relative;
width: 250px;
}
So I want only two columns to fit inside my wrapper. And so without third column being present it fits inside.
Once I add the third column like in the HTML above, the third column doesn't stay in the same row but it drops to the next line and I end up with vertical scroller instead of horizontal. added overflow-x to my css and I don't get a horizontal scroll-bar but the third column still drops to the next line.
However I tried to increase wrapper to 750px and this time all three columns fit in the same line so I thought nothing is wrong with my css or did I think wrong?
Why would there not be horizontal scroll once my wrapper is 500px and I have three columns inside with width:250px on each.

Answer 1

Add white-space: nowrap; to the container, use inline-block instead of float, and use overflow-x instead of overflow-y.
This works:
http://jsfiddle.net/vXqY2/
.wrapper {
width: 600px;
white-space: nowrap;
overflow:scroll;
}
.fixed_column {
display: inline-block;
height: 100px;
width: 250px;
background-color: red;
}

Answer 2

The floated elements are going to automatically wrap down to the next level if they start going off the right of the parent container. That's how floats work. To keep them on the same line, you have a few options:
Make the parent container wider (as you did), but you'll need an extra element for the scrollbar
Switch from float: left; to display: inline-block; (as #Alex suggested), but you'll need to make concessions for IE7.
Switch from float: left; to display: table-cell;. Don't recommend this, I tried it and it turns out it's kind of painful :-p
See all techniques in a jsFiddle demo

Answer 3

It is because your fixed columns divs are only 250px so they never break the 505px container they are currently in.
Here try this.
example:
<div class="wrapper">
<div class="scroll-container">
<div class="fixed_column">A</div>
<div class="fixed_column">B</div>
<div class="fixed_column">C</div>
</div>
</div>
.wrapper {
width: 505px;
position:relative;
overflow-y: scroll;
overflow-x: scroll;
}
.scroll-container {
width:1000px;
}
.fixed_column {
float: left;
height: 600px;
position: relative;
width: 250px;
background-color: green;
}