Display 3 columns each row without using bootstrap - html

Question

This is a wordpress site http://www.jokerleb.com
Each cell has the following code
.post-block-out {
margin: 0 0 8px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.post-block-out {
background: #fff;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 2px 0 0 #E3E4E7;
}
div{
display: block;
}
post-block {
background-color: #fff;
margin: 0;
padding: 20px 15px 15px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.post-block-out, .searchblock, .paging, .sidebar-block {
background: #fff;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 2px 0 0 #E3E4E7;
}
.content_res {
width: auto;
}
.content_left{
width:30%;
float: none;
margin: auto;
padding: auto;
}
<div class="content_res">
<div class="content_left">
<div class="post-block-out ">
<div class="post-block">
<div class="post-left">
<img class="attachment-ad-medium" alt="" title="" src="http://www.jokerleb.com/wp-content/themes/classipress/images/no-thumb-150x150.png">
</div>
<div class="post-right full">
<div class="tags price-wrap">
<span class="tag-head"><p class="post-price">$1600$</p></span>
</div>
<h3>Kyosk 2m×2m</h3>
<div class="clr"></div>
<p class="post-meta">
<span class="dashicons-before folder">Other Home & Garden</span> <span class="dashicons-before owner">Charbel</span> <span class="dashicons-before clock"><span>August 25, 2017</span></span>
</p>
<div class="clr"></div>
<p class="post-desc">Kyosk ma3moul la snack fi haute rekeb fi madfouf PVC ma3 inaraaa</p>
<p class="stats">23 total views, 0 today</p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div><!-- /post-block -->
</div>
</div>
</div>
that snippet is affecting every box on the page, they are now aligned in the middle. I want them to be 3 columns per row.
No bootstrap or any grid library because it's affecting the theme, i guess maybe because it has a class called container, so when using bootsrap, the container centers everything. If you know a library that doesn't conflict with the existing code I'd use it.
It's a very old wordpress theme, many of the styles are stored in the database so if I need to add class I might have to do it in jquery
http://jsfiddle.net/tusharj/ucb0bdmj/
Don't worry about it. And you'll see on the website duplicate css code, don't worry about it, I use a plugin to manage css in the development phase, the code I don't want is display:none
All I want is 3 columns on each row. I tried to add float the first left and the third right but the problem is that they move only within their container.
Plus I don't know where to place <div class='row'>, I was trying to do it with bootstrap just to see if it would work, I didn't spot the correct place to create new row

Answer 1

If this is what you expect
Follow this to make it work:
Remove width: 30% of class .content_left
Add display: flex; flex-wrap: wrap; to block you want to show. (In this case was the div with id="block1"
Add width of 33% for each div with class post-block-out
You can try to add some margin or padding to make the gap between divs.
important: I guess this is better than use floats if you want to avoid conflicts. And, if you want to make it responsive, just use media queries and add width: 100%; to each div with class post-block-out

Answer 2

You can try this responsive solution:
* {margin: 0; padding: 0; box-sizing: border-box}
.content-left {
position: relative;
width: 1200px;
max-width: 100%;
margin: 0 auto;
column-count: 3;
column-gap: 10px;
}
.content-left > .post-block-out {
position: relative;
margin-bottom: 10px;
page-break-inside: avoid;
break-inside: avoid-column;
box-shadow: 0 0 1px #000;
}
.content-left > .post-block-out > img {
display: block;
width: 460px;
max-width: 100%;
}
.content-left > .post-block-out > .info {
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 10px;
color: #fff;
background: #000;
opacity: .75;
}
.content-left > .post-block-out > .info > span {
margin: 0 5px;
}
.content-left > .post-block-out > .info > .title {
text-transform: uppercase;
}
#media (max-width: 1200px) {
.content-left {padding: 0 10px}
}
#media (max-width: 768px) {
.content-left {column-count: 2}
}
#media (max-width: 480px) {
.content-left {column-count: 1}
}
<div class="content-left">
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/themes/classipress/images/no-thumb-150x150.png" alt="">
<div class="info">
<span class="title">Kyosk 2m x 2m</span><span class="price-tag">$1,600.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-250x250.jpeg" alt="">
<div class="info">
<span class="title">Apartment For Sale in JBEIL</span><span class="price-tag">$180,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/118310-250x250.jpg" alt="">
<div class="info">
<span class="title">Apartment for sale in Adonis</span><span class="price-tag">$230,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/655212-250x250.jpg" alt="">
<div class="info">
<span class="title">Duplex for sale in Al Ghiye</span><span class="price-tag">$125,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/584970-250x250.jpg" alt="">
<div class="info">
<span class="title">Honda CRV 2012</span><span class="price-tag">$19,999.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/628582-250x250.jpg" alt="">
<div class="info">
<span class="title">Malinois puppies For Sale</span><span class="price-tag">$900.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/565460-250x250.jpg" alt="">
<div class="info">
<span class="title">Villa for Sale in Chabtin</span><span class="price-tag">$225,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/53048-250x250.jpg" alt="">
<div class="info">
<span class="title">Shop for Sale in Ain el Roumani</span><span class="price-tag">$140,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/601563-250x250.jpg" alt="">
<div class="info">
<span class="title">Honda CRV</span><span class="price-tag">$ ???</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/484415-250x250.jpg" alt="">
<div class="info">
<span class="title">Apartment in dekwaneh For Rent</span><span class="price-tag">$700.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/4610-250x250.jpg" alt="">
<div class="info">
<span class="title">Nissan Pathfinder</span><span class="price-tag">$5,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/667783-250x250.jpg" alt="">
<div class="info">
<span class="title">Land for sale at Ain Kfaa<br>(عين كفاع)</span><span class="price-tag">$100,000.00</span>
</div>
</div>
</div>

Answer 3

.content-left {width:100%; }
.post-block-out { float:left; width:33% }