Where to apply clearfix(es)? [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Top margin of first card is result of float: right applied on button.
If I remove that right float, top margin appears above second card. What's proper way to fix this? Where to apply clearfix(es)?
check example on codepen

Answer 1

Just add float: left; to .card CSS class and remove float: right; from .btn
body {
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #eee;
}
.card {
max-width: 20rem;
display: inline-block;
margin-bottom: 0.75rem;
background-color: #fff;
border-radius: 0.25rem;
border: 1px solid rgba(0,0,0,0.125);
float: left;
}
.card-wide {
display: inline-block;
position: relative;
width: 35rem;
margin-bottom: 0.75rem;
background-color: #fff;
border-radius: 0.25rem;
border: 1px solid rgba(0,0,0,0.125);
.card-img-left {
float: left;
width: 15rem;
height: 100%;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.card-block-wide {
box-sizing: border-box;
float: left;
width: 20rem;
height: 100%;
padding: 1.25rem;
.card-title-wide {
margin: 0;
font-size: 1.5rem;
}
}
.btn-wide {
position: absolute;
bottom: 0; right: 0;
box-sizing: border-box;
width: 20rem;
line-height: 1.5;
text-align: center;
cursor: pointer;
padding: 0.75rem 1rem;
font-size: 1rem;
border-bottom-right-radius: 0.25rem;
text-decoration: none;
}
}
.card-img-top {
width: 100%;
display: block;
height: 180px;
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.card-block {
padding: 1.25rem;
&::after {
content: "";
display: table;
clear: both;
}
}
.card-title {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 1.5rem;
small {
&::before {
content: "(";
}
&::after {
content: ")";
}
font-size: 0.75rem;
color: #777;
}
}
.btn {
line-height: 1.25;
text-align: center;
cursor: pointer;
padding: 0.5rem 1rem;
font-size: 1rem;
border-radius: 0.25rem;
text-decoration: none;
/*float: right;*/
}
.btn-primary {
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
&:hover {
color: #fff;
background-color: #025aa5;
border-color: #01549b;
}
}
.btn-primary:focus, .btn-primary.focus {
color: #fff;
background-color: #025aa5;
border-color: #01549b;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
&:hover {
color: #fff;
background-color: #449d44;
border-color: #419641;
}
}
.btn-success:focus, .btn-success.focus {
color: #fff;
background-color: #449d44;
border-color: #419641;
}
<div class="container">
<div class="card">
<img src="http://image.tmdb.org/t/p/original/c5o7FN2vzI7xlU6IF1y64mgcH9E.jpg" alt="Card image cap" class="card-img-top" />
<div class="card-block">
<h4 class="card-title">The Prestige <small>2006</small></h4>
<p class="card-text">
Two stage magicians engage in competitive one-upmanship in an attempt to create the ultimate stage illusion.</p>
Add as favourite
</div>
</div>
<div class="card-wide">
<img src="http://i.imgur.com/g0Fl4pn.jpg" class="card-img-left">
<div class="card-block-wide">
<h4 class="card-title-wide">Inception</h4>
<p class="card-text-wide">
Two stage magicians engage in competitive one-upmanship in an attempt to create the ultimate stage illusion.</p>
</div>
Add as favourite
</div>
</div>