I have implemented the following CSS to organize 8 sections of text and images. The issue is with fixing the size of the boxes, as they currently adjust based on their content length. This means that a box with shorter content will appear smaller than a box with longer content.
CSS
.test{
min-width:80%;
max-width:80%;
margin: 0 auto;
}
.test ul {
text-align:center;
}
.test ul li{
box-sizing: border-box;
text-align:left;
list-style:none;
display:inline-block;
vertical-align:top;
width: 23%;
min-height: 240px;
border: 1px solid orange ;
border-radius: 5px;
padding:1%;
margin: 0.5%;
}
.test li p{overflow: hidden; margin: 10px;}
.test p + p{clear: both;}
.test li p img{float: right; margin-right:10px;}
.test h2{margin-left: 2.2%;}
HTML
<div class="test">
<h2>This is the test of 8 sections</h2>
<ul>
<li><p>
<img src="../img/d.jpg" width="50" height="50"/>
test tfdfdf dfdf<br/>
454 4545 45<br/>
32434 34234
</p>
<p>
blah blah blah Text Here <br/> See more …
</br>
</p></li>
<li><p>
<img src="../img/d.jpg" width="50" height="50"/>
test tfdfdf dfdf<br/>
454 4545 45<br/>
32434 34234
</p>
<p>
blah blah blah Text Here <br/> See more …
</br>
</p></li>
<li><p>
<img src="../img/d.jpg" width="50" height="50"/>
test tfdfdf dfdf<br/>
454 454545 215<br/>
32434 34234
</p>
<p>blah blah blah Text Here <br/> See more …
</br>
</p></li>
<li><p>
<img src="../img/d.jpg" width="50" height="50"/>
test tfdfdf dfdf<br/>
45456 5565<br/>
32434 34234
</p>
<p>blah blah blah Text Here <br/> See more …
</br>
</p></li>
<li><p>
<img src="../img/d.jpg" width="50" height="50"/>
test tfdfdf dfdf<br/>
454 4545 45<br/>
32434 34234
</p>
<p>
blah blah blah Text Here <br/> See more …
</br>
</p></li>
<li><p>
<img src="../img/e.jpg" width="50" height="50"/>
Test test<br/>
3434 343434 34343<br/>
Test new Test
</p>
<p>blah blah blah Text Here <br/> See more …
</br>
</p></li>
<li><p>
<img src="../img/f.jpg" width="50" height="50"/>
<b>fdgfg dfgg fdg</b><br/>
435345 435345<br/>
Gladstone Qld
</p>
<p> blah blah blah Text Here <br/>See more …
</p>
</li>
<li><p>
<img src="../img/g.jpg" width="50" height="50"/>
Test Test is test<br/>
444 5444 4444<br/>
Test test
</p>
<p>
blah blah blah Text Here <br/> See more …
</p>
</li>
</ul>
</div> <!-- test -->
JsFiddle Click Here