CSS Float Left Inconsistencies Elements Randomly Jump Row - html

Question

I've been trying to write custom CSS for styling of related posts which appear under each article of my website. Each related post consists of 1 thumbnail and 1 text headline.
There are 8 in total under each page grouped in a UL list, and the LI elements are floated to the Left so they display in 2 rows.
Problem is for some reason occasionally I have LI items which jump row for now apparent reason.
Here is an example:
Screenshot
This is the html part of the code:
<div class="crp_related ">
<h3>Related Stories:</h3>
<ul>
<li style="padding-top: 10px">
<a href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Document reveals ISIS plot for world domination in chilling detail: Full translation below" alt="Document reveals ISIS plot for world domination in chilling detail: Full translation below"
src="./wp-content/uploads/2015/12/Screen-Shot-2015-12-07-at-12.45.19-PM-150x150.png">
</a>
<br>
<a class="crp_title" href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">Document reveals ISIS plot for world domination in chilling…</a>
</li>
<li style="padding-top: 10px">
<a href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out"
alt="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out" src="./wp-content/uploads/2015/12/farook1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">‘Devout’ US Muslim and his Saudi wife left their</a>
</li>
<li style="padding-top: 10px">
<a href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’" alt="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’"
src="./wp-content/uploads/2015/12/Obama126-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">Obama: ‘We Lose’ When America Scrutinizes…</a>
</li>
<li style="padding-top: 10px">
<a href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS" alt="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS"
src="./wp-content/uploads/2015/12/565f3967c461884a3d8b4627-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">‘Great partners’: Pentagon rejects Russian…</a>
</li>
<li style="padding-top: 10px">
<a href="./7-isis-facts-every-american-must-know/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="7 ISIS Facts Every American Must Know" alt="7 ISIS Facts Every American Must Know" src="./wp-content/uploads/2015/12/ISIS-Genocide-in-Iraq-AP-Photo-640x480.jpg">
</a>
<br>
<a class="crp_title" href="./7-isis-facts-every-american-must-know/">7 ISIS Facts Every American Must Know</a>
</li>
<li style="padding-top: 10px">
<a href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI"
alt="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI" src="./wp-content/uploads/2015/12/120515_2259_WillYourCit1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">Will Your City or State be the Next San Bernardino? At Least</a>
</li>
<li style="padding-top: 10px">
<a href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’" alt="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’"
src="./wp-content/uploads/2015/12/56600a0dc46188c3078b45e7-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">‘Allah took their sanity’: Putin accuses Turkish…</a>
</li>
<li style="padding-top: 10px">
<a href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week" alt="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week"
src="./wp-content/uploads/2015/12/1028392998-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over…</a>
</li>
</ul>
<div class="crp_clear">
</div>
</div>
And this is the CSS part:
div.crp_related {
clear: both;
margin: 10px 0;
}
div.crp_related h3 {
margin: 0 !important;
}
div.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
div.crp_related li, div.crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: left;
display: table-cell;
}
div.crp_related li {
margin: 5px !important;
padding: 6px;
}
div.crp_related li:hover {
background: #eee;
}
div.crp_related a:hover {
text-decoration: none;
}
div.crp_related img {
max-width: 150px;
max-height: 150px;
min-height: 150px;
min-width: 150px;
margin: auto;
display: block;
overflow: hidden;
}
div.crp_related .crp_title {
position: relative;
max-width: 150px;
height: 100%;
padding-left: 0px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
color: #dc291e;
font-size: 12pt;
font-weight: bold;
}
div.crp_related .crp_thumb, div.crp_related li, div.crp_related .crp_title {
vertical-align: bottom;
}
.crp_clear {
clear: both;
}
Why is this happening?
What am I doing wrong?

Answer 1

Add following div after every four records.
<div style='clear:both'></div>

Answer 2

Please post a snippet of code with both CSS and HTML together.
1)
Probably the problem is due to the fact that in the first row the first 2 articles have a longer crp_title and it spans 4 rows, but in the other 2 articles crp_title spans 3 rows.
A floating element going in a new line tries to go up, and the reason why the second articles' row goes right is that the 3rd and 4th articles of the first row have a smaller height.
You can easily check it with your browser inspector.
2)clear:both after the last element of each row
A quick fix can be setting a fixed height in px of your .crp_title

Answer 3

This should do the trick:
div.crp_related > ul > li:nth-child(4):after {
content: '';
clear: both;
display: block;
visibility: hidden;
height: 0px;
}

Answer 4

This issue is due to unequal height of floated content, so you need to clear float and get next element on new row. You can do that using nth-child selectors.
div.crp_related {
clear: both;
margin: 10px 0;
}
div.crp_related h3 {
margin: 0 !important;
}
div.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
div.crp_related li,
div.crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: left;
display: table-cell;
}
div.crp_related li {
margin: 5px !important;
padding: 6px;
}
div.crp_related li:hover {
background: #eee;
}
div.crp_related a:hover {
text-decoration: none;
}
div.crp_related img {
max-width: 150px;
max-height: 150px;
min-height: 150px;
min-width: 150px;
margin: auto;
display: block;
overflow: hidden;
}
div.crp_related .crp_title {
position: relative;
max-width: 150px;
height: 100%;
padding-left: 0px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
color: #dc291e;
font-size: 12pt;
font-weight: bold;
}
div.crp_related .crp_thumb,
div.crp_related li,
div.crp_related .crp_title {
vertical-align: bottom;
}
.crp_clear {
clear: both;
}
/* THIS IS DUE TO UNEQUAL HEIGHT OF FLOATED CONTENT, so Clear Float on every 5th element */
#media (min-width: 768px) {
div.crp_related li:nth-child(4n+1) {
clear: both;
}
}
#media (max-width: 767px) {
div.crp_related li:nth-child(3n+1) {
clear: both;
}
<div class="crp_related ">
<h3>Related Stories:</h3>
<ul>
<li style="padding-top: 10px">
<a href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Document reveals ISIS plot for world domination in chilling detail: Full translation below" alt="Document reveals ISIS plot for world domination in chilling detail: Full translation below"
src="./wp-content/uploads/2015/12/Screen-Shot-2015-12-07-at-12.45.19-PM-150x150.png">
</a>
<br>
<a class="crp_title" href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">Document reveals ISIS plot for world domination in chilling…</a>
</li>
<li style="padding-top: 10px">
<a href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out"
alt="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out" src="./wp-content/uploads/2015/12/farook1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">‘Devout’ US Muslim and his Saudi wife left their</a>
</li>
<li style="padding-top: 10px">
<a href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’" alt="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’"
src="./wp-content/uploads/2015/12/Obama126-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">Obama: ‘We Lose’ When America Scrutinizes…</a>
</li>
<li style="padding-top: 10px">
<a href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS" alt="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS"
src="./wp-content/uploads/2015/12/565f3967c461884a3d8b4627-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">‘Great partners’: Pentagon rejects Russian…</a>
</li>
<li style="padding-top: 10px">
<a href="./7-isis-facts-every-american-must-know/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="7 ISIS Facts Every American Must Know" alt="7 ISIS Facts Every American Must Know" src="./wp-content/uploads/2015/12/ISIS-Genocide-in-Iraq-AP-Photo-640x480.jpg">
</a>
<br>
<a class="crp_title" href="./7-isis-facts-every-american-must-know/">7 ISIS Facts Every American Must Know</a>
</li>
<li style="padding-top: 10px">
<a href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI"
alt="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI" src="./wp-content/uploads/2015/12/120515_2259_WillYourCit1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">Will Your City or State be the Next San Bernardino? At Least</a>
</li>
<li style="padding-top: 10px">
<a href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’" alt="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’"
src="./wp-content/uploads/2015/12/56600a0dc46188c3078b45e7-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">‘Allah took their sanity’: Putin accuses Turkish…</a>
</li>
<li style="padding-top: 10px">
<a href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week" alt="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week"
src="./wp-content/uploads/2015/12/1028392998-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over…</a>
</li>
</ul>
<div class="crp_clear">
</div>
</div>

Answer 5

I think the coding it's pretty much simpler. Take a look at this snippet:
ul li {
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
list-style: none;
margin-top: 40px;
margin-right: 40px;
}
ul li:last-child {
margin-right: 0;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
This is the base, now you can add the image and description. This ul will fit to container's width.
Hope it helps