PHP/HTML issue placing div content next to each other - html

Question

I have a small issue. I am trying to create a Treeview of a number of categories pulled out of the database. These categories should be placed next to each other (with a little space between them). Have been trying quite some css styling etc, but always get those categories underneath each other, no matter what I try it seems. Also cleared my cache several times without success. Does anyone have an idea on how to get this done ? It is dynamically, so it can be that there are 2, 3 or more categories to be displayed next to one other. Those categories should have a Treeview of corresponding subcategories and documents which is not yet coded.
My relevant code so far :
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center"><?=$this->instrument->name?></h3>
</div>
<div class="content-wrapper">
<div class="content">
<?php foreach ($this->categories as $category):?>
<div class="category">
<li class='active'><?=$category->name?></li>
</div>
<?php endforeach;?>
</div>
</div>
</div>
</main>
</div>
And in CSS :
content{
width: auto;
position: fixed;
overflow: visible;
}
.category{
width: 200px;
display: inline-block;
float: left;
}
Any help is much appreciated !

Answer 1

You need to use the display: inline-block; CSS property on the <li> element. Like so...
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center">Drum</h3>
</div>
<div class="content-wrapper">
<div class="content">
<div class="category">
<li class='active'>Snare</li>
<li class='active'>High-hat</li>
<li class='active'>Base</li>
<li class='active'>Cymbal</li>
</div>
</div>
</div>
</div>
</main>
</div>
CSS
.category li {
display: inline-block;
margin-right: 1em;
}
Working version here: https://jsfiddle.net/fraggley/wrox5198/7/

Answer 2

If you are using bootstrap 4, you can use d-display-block class:
content{
width: auto;
position: fixed;
overflow: visible;
}
.category{
width: 200px;
display: inline-block;
float: left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center"><?=$this->instrument->name?></h3>
</div>
<div class="content-wrapper">
<div class="content">
<div class="category">
<li class='active d-inline-block'>AAA</li>
<li class='active d-inline-block'>BBBB</li>
<li class='active d-inline-block'>CCCC</li>
<li class='active d-inline-block'>DDDD</li>
</div>
</div>
</div>
</div>
</main>
</div>