I have noticed that this question, or similar ones, has been asked multiple times on various platforms. My query is regarding preventing line breaks in floated items within a scrolling section. Specifically, I have a div where I desire horizontal scrolling.
One common solution I came across involves adding margin or left values to each item individually. Here is an example demonstrating this fix: JSFIDDLE From this Post
This method works effectively when the container's width is known. However, my concern arises with using a variable width (auto) as the data will be dynamically retrieved from a database, leading to varying widths based on results.
Below is an example of what I am referring to:
CSS:
.items{
width:100%;
overflow-x:scroll;
overflow-y:hidden;
background:rgba(255,255,255,.8);
height:350px;
position:relative;
}
.items .scroll{
height:100%;
padding:0px;
width:auto;
position:absolute;
white-space:nowrap;
}
.items .item{
height:100%;
margin-left:25px;
margin-right:25px;
width:150px;
float:left;
position:relative;
display:inline-block;
}
.items .item a{
padding:5px;
background:#0e76bc;
color:#FFF;
text-decoration:none;
}
.items .item .img:hover{
box-shadow:0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
}
.items .item .img{
height:175px;
width:100%;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
}
HTML :
<div class="items">
<div class="scroll">
<div class="item">
<p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
<p class="title">Product Name</p>
<p class="left"><strong>Current Bid:</strong> £10.00</p>
<p class="right"><a href="#">View Item</a></p>
</div>
<!-- .item repeats a few times after a DB query, hence exact width is unknown -->
</div>
</div>
An alternative approach could involve utilizing an init() function in JavaScript, although I am inclined towards finding a CSS-based solution for this issue.