KruSuPhy KruSuPhy - 2 months ago 5x
CSS Question

Showing 4 boxes on the same line within a div

I'm attempting to create a 'popular products' bar at the bottom of a page.
Here is an example:
Product bar

However, I've run into the problem that multiple divs don't appear on the same line. I've read different ways of doing it including display:inline-block(everywhere says this is a bad idea), display:table-cell(this is creating a new line still), and using spans with display:inline-block(also still creating a new line.) I've also tried removing 'display' in my .productbox class, which just doesn't show the box at all.

Here's the code for my productbox:

.productbox {
width: 168px;
background-color: #b2b2b2;


How about using flex box? Here's the HTML & CSS

  display: flex;

.wrapper div
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
<div class="wrapper">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>

Note that depending on your target audience you may need some vendor prefixes. Flex has a ton of nice options though, and makes targeting different screen sizes trivial.