I have a container DIV with a fixed height and width (275x1000px). In this DIV I want to put multiple floating DIVs each with a width of 300px, and have a horizontal (x-axis) scrollbar appear to allow the user to scroll left and right to view everything.
This is my CSS so far:
div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
The problem is that the floating DIVs will not continue past the width of the container. After putting three of the floating DIV's they will continue on beneath. If I change overflow-y to auto, then the vertical scrollbar appears and I can scroll down.
How can I change this to make the floating DIVs continue on without going beneath each other?
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.