Overflow-x: scroll - is not working

#1

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">&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>	
						<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">&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">
					</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;
}
#3

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.

https://codepen.io/paulobrien/pen/gJgqqZ