ramon_salla ramon_salla - 13 days ago 5
CSS Question

Overflow X issue not working on Firefox but does on IE and Chrome so far

This is the code: the problem in Firefox is that the scrollbar has no limit in X direction.

Please, open the code in Chrome and Firefox to see the diference in the scrollbar for a better understanding of the problem.

Thanks in advance!

<html>
<body>
<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; height:180px;">
<div style="position: absolute; left:0px; right:0px; top:0px; bottom:0px; overflow:auto; ">
<div style="width:40000px">
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>
<div style="width:150px; height:150px; background-color:blue; margin:4px; float:left" > </div>

</div>
</div>
</div>
</body>
</html>

Answer

There is no content within your divs?

If you want it to work with no content in them, try adding the

display:block;

into the css :)