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>
</div>
<div class="innerinlineCont">
<div class="Header"> </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>
<div class="Router-Port">
<img src="images/TopologyIcons/Router-Port.png" title="" class="RouterportStyledown">
<label class="PortDown">Port ID:12345</label>
</div>
</div>
</div>
<div class="innerinlineCont">
<div class="Header"> </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">
</div>
</div>
</div>
</div>
</div>
.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;
}