How to putting clearfix after third div? - html

Question

I have boxes which size is 33.33% that is why 3 boxes are making 100% totaly.when I added fourth div and my 4th div is slipping whenever I putted .clearfix my problem is over..but I want to put clearfix every each 3rd div
thanks.
ok.. #AndreiGheorghiu my codes;
.ref-box {
position: relative;
width: 30%;
float: left;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
copy this code more than one and see the result

Answer 1

.parent>.child:nth-child(3n) {
clear: both;
}
UPDATE, after question being completed:
Your clearfix is working fine. Here:
.ref-box {
position: relative;
width: 30%;
float: left;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
Second update, after seeing the live page. Your problem is you are floating elements of uneven heights.
Updated again, after seeing the live example. Please not I added a custom class (.makeColumns) to your col-md-12 container. I also added this to CSS:
.makeColumns {
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}
h2 {
-webkit-column-span: all;
column-span: all;
}
You can see it working here:
.makeColumns {
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}
h2 {
-webkit-column-span: all;
column-span: all;
}
.ref-box {
position: relative;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<div class="section references" id="references">
<div class="row">
<div class="col-md-12 makeColumns">
<h2 class="head"><i class="fa fa-code"></i> References</h2>
<!-- <p>
This page will be designed soon. for now click here to see his references
</p>-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/ElZero/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/ElZero/thumbnail.jpg" alt="El Zero" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">El Zero</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/Singolo/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/Singolo/thumbnail.jpg" alt="Singolo" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Singolo</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="http://cv.firatabak.com/works/Facebook/thumbnail.jpg" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
</div>
</div>
</div>

Answer 2

you can write css for that like given bellow
div:nth-child(3n+3) {
clear: both;
}

Answer 3

Alternatively, you can use overflow: hidden;