2

I have seen this question and similar questions asked a few times on here, but how can i prevent line breaks to my floated items inside a scrolling section. I have a div that I want a horizontal scroll on.

I know this can be done by added the margin or left values to each item as shown here, this seems to be a common fix for the problem: JSFIDDLE From this Post

This works well if you know the width of the container, how would this work with a width of auto as I intend to pull this data from a database, so the width would vary depending on the number of results.

Heres my example:

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> &pound;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>

This could be solved with an init() function in javascript, but I feel there should be a way to do this in css.

Community
  • 1
  • 1
Paul Ledger
  • 1,125
  • 4
  • 21
  • 46

2 Answers2

3

Try like this along with your code: DEMO

CSS:

.items .item{
    height:100%;
    margin-left:25px;
    margin-right:25px;
    width:150px;   
    position:relative;
    display:inline-block;
}
G.L.P
  • 7,119
  • 5
  • 25
  • 41
1

Just take float:left; away from .items .item, and it seems to work like asked:

        .items .item{
    height:100%;
    margin-left:25px;
    margin-right:25px;
    width:150px;
    position:relative;
    display:inline-block;
}
Shamppi
  • 447
  • 4
  • 16