JSFiddle - React, Tailwind, and code Playground
HTML
<div id="view">
<div id="gallery">
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
<div id="gallery_2_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
<div id="gallery_3_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
<div id="gallery_4_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
</div>
</div>
CSS
.gallery_block_image_p {
width: 354px;
height: 532px;
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 10px;
float: left;
background-repeat: no-repeat;
background-color:#f00;
}
#gallery {
border: 0px solid black;
position: relative;
top: 99px;
/* width: 8000px; */ /* When this is uncommented it works, with a huge amount of space to the right */
height: 532px;
z-index: 99;
}
#view {
width:800px;
height:530px;
position:relative;
overflow:scroll;
overflow-y:hidden;
}
JavaScript
galleryWidth = 364 * document.getElementsByClassName('gallery_block_image_p').length;
document.getElementById('gallery').style.width = galleryWidth+'px';