I have a fixed container that contains another container with multiple DIVs based on user choices. I want these DIVs to align horizontally to allow for horizontal scrolling, without any vertical scrolling.
For example:
[x] [x] [x]Here is a simplified version of my setup:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed by the user
</div>
</div>
The CSS code looks like this:
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
#final {
display: inline-block;
float: left;
}
This arrangement works in Firefox, but not in IE7. In IE7, all the "#final" divs stack vertically like this:
[x] [x] [x]Do you have any suggestions on how to solve this issue?