I have the main section called panel-body with packages nested inside. The packages are displaying properly inside the panel-body and stacking in a row.
If you want to see it live, visit:
Although I attempted to use float:left; in my package CSS, the packages did not align within the body as expected.
To illustrate:
https://i.sstatic.net/SYyNR.png
Removing the float:left; property solves the alignment issue, but then the packages do not display three per row like desired.
See here:
https://i.sstatic.net/cOKFC.png
Below is the CSS for my packages:
.package {
width: 33.33333333%;
}
And this is the CSS for the panel-body:
.panel {
margin-bottom: 30px;
background: url(https://castiamc.com/buycraft/bordersv2/Middle.png);
width: 850px;
border: none;
border-radius: 0;
position: relative;
min-height: 300px;
padding: 20px;
color: #fff;
}
.panel-body {
padding: 15px;
text-align:justify;
}
.panel .panel-body {
color: #3d3e3f;
box-sizing: border-box;
position: relative;
max-width: 750px;
top: -75px;
left: 13px;
}
<div class="package">
<img src="'.(isset($image) && $image!="" && ($it == 1 || $it == 3 || $it == IMG_JPEG) ? $image : "img/404.jpg").'" class="img-rounded img-responsive" style="width:250px; height:168px;">
</div>
Currently, my goal is to have each row in the panel-body display three packages side by side.