Reputation: 105
I've got a collection of points that I'm displaying, I'm floating them all left, but if the text is too much in the one above it forces there to be a space appear. Can't figure out what's causing this, does anyone have any ideas?
HTML:
<div class="all-the-screen checkmark-move">
<div class="contain-inner">
<div class="checkmark-outer">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
<div class="clearfix"></div>
<div class="read-more-show noselect">Show More</div>
</div>
</div>
</div>
CSS:
.checkmark-outer {
width:92%;
margin-left:4%;
margin-right:4%;
}
.checkmark-move {
margin-top:18px;
}
.checkmark-inner {
overflow: hidden;
font-family: 'Source Sans Pro Regular';
line-height:24px;
vertical-align: middle;
padding-left:4px;
padding-right:20px;
padding-top:4px;
}
.checkmark-33 {
width:33.33%;
float:left;
margin-bottom:6px;
}
.checkmark-icon {
float:left;
}
.icon-background {
color: #8d1e22;
}
.icon-text {
color: #ffffff;
}
Upvotes: 1
Views: 134
Reputation: 167250
Okay, since you are already familiar with the clearfix
concept, you are using it wrong. Change your code this way, to include the float
ed elements inside the .clearfix
:
<div class="clearfix">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
</div>
Adding height
is a hacky way. Use the clearfix
properly to nest the floated items.
And also on a side note, use <i>
tag to display icons and not <div>
tags. It works, but it is not semantically correct. A <div>
should be used only for a division or a section.
Upvotes: 3
Reputation: 812
Give min-height
to each checkmark wrap i.e in your case .checkmark-33
Example-
.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}
Upvotes: 0