I have encountered an issue with the layout of my HTML code. The inner divs are appearing in a lower row instead of horizontally inside the outer div with horizontal scrolling. I have already tried using properties like white-space:nowrap, but the problem persists. Why is this happening?
<div style={{position:'absolute', width:'1200px', height:'80px',background:'#cc5',top:'270px',left:'100px',whiteSpace: 'nowrap',display:'inline-block',overflowX:'auto'}}>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
<div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
</div>