I am trying to give my “innerContainer” fixed width: 800px with overflow-x:scroll but it is not working, all images should render horizontally in width:800px only and it should scroll horizontally.

<div class="outerContainer">
		<div class="innerContainer">
			<div id="Router">
				<div class="innerinlineCont martop50">
					<div class="imageContainer">
						<label class="routerImgLbl">Router ID: 12345</label>
						<div style="background: url(images/TopologyIcons/Router.png) no-repeat;" class="routerImg"></div>
						<!--<img src="images/TopologyIcons/Router.png">-->
				<div class="innerinlineCont">
					<div class="Header">&nbsp;</div>
					<div class="imageContainer">
						<div class="Router-Port">
							<label class="PortUp">Port ID:12345</label>	
							<img src="images/TopologyIcons/Router-Port.png" title="" class='RouterportStyleup'>
						<div class="Router-Port">
							<img src="images/TopologyIcons/Router-Port.png" title="" class="RouterportStyledown">
							<label class="PortDown">Port ID:12345</label>		
				<div class="innerinlineCont">
					<div class="Header">&nbsp;</div>
					<div class="imageContainer arrows">
						<img src="images/TopologyIcons/Arrow-Right.png" title="" class="Rightarrostyle">
						<img src="images/TopologyIcons/Arrow-Left.png" title="" class="Leftarrostyle">
.outerContainer{
    width: 100%;
    float: left;
   display:table;
.innerContainer{
       width:800px;
	border:1px solid #000;
	overflow-x: scroll !important;
	white-space: nowrap; 
	font-size: 0;
.imageStyle{
width:100%;
height:auto;
.innerinlineCont{
float:left;
display:table-cell;
vertical-align:middle;
.Header,.HeaderHide{
font-size: 12px;
color: #333;
margin-bottom: 10px;
text-align: center;
height:35px;
.imageContainer{
display:table-cell;
height:100px;
vertical-align:middle;
.abc{
display:inline;
.text-alignRight{
text-align:right;
.Router-Port{
	display:block;
	cursor:pointer;
.martop20{
margin-top:20px;
.routerImg{
display:block;
height:100%;
width:77px;
margin-top:5px;
.innerinlineCont label{
display:block;
font-family: arial;
font-size:10px;
color:#191919;
#Router .Router-Port .PortUp{
margin-top: -30px;
margin-left: -20px;
text-align: center;
margin-bottom:0px;
#Router .Router-Port .PortDown{
margin-left: -20px;
text-align: center;
margin-bottom:0px;
margin-top:0px;
That’s because you don’t have any content inside that is wider than 800px. If I add a 1600px width image then you will see that the parent does scroll.
You are floating innerinlineContent and that means the float will always wrap to a new line and will not just force a parent wider. You probably meant to use display:inline-block instead of float but you have mixed up a number of concepts.
It could all be done easier these days using flex and not resorting to font-size:hacks and abusing inline-block. Just one rule will accomplish the sideways scrolling.