Unable to produce horizonzal scroll with css

Question

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.

Alex · Answer 1 · 2013-03-14T23:59:06.727

2

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;
}

edited Mar 14 '13 at 23:59

answered Mar 14 '13 at 23:46

Alex

2,651
2
25
45

Doesn't work like that [LINK](http://jsfiddle.net/8dYpG/). Not sure why. – hjpotter92 Mar 14 '13 at 23:49
This won't work perfectly in IE7, just to warn you :-p I was going to recommend the same thing, but the caveat being you will still need a fixed width on the parent container so IE7 doesn't try to make the elements drop down. Also, don't forget to set `white-space: normal;` on the child elements. – thirdender Mar 15 '13 at 00:00

score 0 · Answer 2 · answered Mar 15 '13 at 01:01

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

Kyle Needham · Accepted Answer · 2013-03-15T00:05:16.513

-1

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;
}

edited Mar 15 '13 at 00:05

answered Mar 14 '13 at 23:58

Kyle Needham

3,379
2
24
38

You want the scroll-container to size according to it's content. Once your content passes 1000px, it's broken. – Cory Danielson Mar 15 '13 at 00:18
You could just scale it accordingly, unless your content is dynamic and in then you could use the inline-block method – Kyle Needham Mar 15 '13 at 00:29

Unable to produce horizonzal scroll with css

3 Answers3