All elements inside a div on a single line
css, html
Solution
Remove the `float` for each item and use `inline-block` :
#shop .item {
margin: 20px 0;
/*float: left; Remove this*/
display: inline-block; /*Add this*/
}
Problem
What I want to accomplish is keep all elements inside a div on a single line no matter how many there are: ``` <div class="col-sm-9 items"> <div class="item"> <div class="image pull-left"> <img class="img-responsive" alt="a" src="images/product.png"> </div> <div class="text pull-left"> <p>Lorem Ipsum Dolor consecteur </p> <p>$79/QUANTITY: 1</p> <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6> </div> </div> <div class="item"> <div class="image pull-left"> <img class="img-responsive" alt="a" src="images/product.png"> </div> <div class="text pull-left"> <p>Lorem Ipsum Dolor consecteur </p> <p>$79/QUANTITY: 1</p> <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6> </div> </div> <div class="item"> <div class="image pull-left"> <img class="img-responsive" alt="a" src="images/product.png"> </div> <div class="text pull-left"> <p>Lorem Ipsum Dolor consecteur </p> <p>$79/QUANTITY: 1</p> <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6> </div> </div> <div class="item"> <div class="image pull-left"> <img class="img-responsive" alt="a" src="images/product.png"> </div> <div class="text pull-left"> <p>Lorem Ipsum Dolor consecteur </p> <p>$79/QUANTITY: 1</p> <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6> </div> </div> <div class="item"> <div class="image pull-left"> <img class="img-responsive" alt="a" src="images/product.png"> </div> <div class="text pull-left"> <p>Lorem Ipsum Dolor consecteur </p> <p>$79/QUANTITY: 1</p> <h6 class="blue">Clear <i class="fa fa-times-circle-o"></i></h6> </div> </div> </div> ``` This is the HTML, where items is the container and the item are the elements I need on one line. ``` #shop { position: absolute; left: 0; right: 0; z-index: 5; } #shop .items { overflow: auto; height: 150px; white-space: nowrap; } #shop .item { margin: 20px 0; float: left; display: inline; } #shop .item .image { border-radius: 5px; display: inline-block; padding: 10px; width: 40%; } #shop .item .image img { margin: auto; } #shop .item .text { display: inline-block; width: 60%; padding: 5px 10px; } #shop .button { width: 100%; padding: 7px; margin: 5px 0; } #shop .cart { padding-left: 55px; margin: 5px 0; float: left; } #shop .cart .sep { height: 3px; margin-bottom: 5px; } ``` And this the CSS concerning the said elements.