KruSuPhy KruSuPhy - 3 months ago 10
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;
height:135px;
display:inline-block;
background-color: #b2b2b2;
}

Answer

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

.wrapper
{
  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>
</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.