CSS to float copy to the right - css

Question

I've created the following:
And I'd like the top section 'independent' to be over to the right like the 'interactive' section. I've tried to float: right; but that's not correct.
My code is:
.badgesblock{style: 'padding-left: 30px;'}
.independent
= image_tag 'independent.png', style: 'float:left;'
.independentcopy{style: ''}
%p{style: 'font-weight: bold;'} Independent
%p{style: 'width: 450px;'} We’re the only independent user review site for wedding suppliers. Businesses can’t vet reviews on their listing – that’s why your customers trust us.
%br
%br
.verified
= image_tag 'verified.png', style: 'float:right;'
%p{style: 'font-weight: bold;'} Verified
%p{style: 'width: 450px;'} All reviews and reviewers are verified. Each user fills in their personal details and verifies their profile with a wedding date and a picture. The result is an authentic, trustworthy review system.
%br
%br
.interactive
= image_tag 'interactive.png', style: 'float:left;'
.interactivecopy{style: 'float:right;'}
%p{style: 'font-weight: bold;'} Interactive
%p{style: 'width: 450px;'} Passive display advertising has limited impact. We provide a unique opportunity to actively engage with potential customers and showcase the great service at the heart of your business.
What am I missing in the CSS?

Answer 1

This is a pretty clear cut case for a piece of reusable CSS called the media object.
Its a basic building block with an image, video or whatever and associated text on the left or right.
/** Generic media object **/
.media {
overflow: hidden;
}
.media-item {
float: left;
margin-right: 25px;
}
.media.flipped > .media-item {
margin-right: 0;
margin-left: 25px;
float: right;
}
/** specific styles **/
.badge {
/* ... */
}
<div class="badgesblock">
<div class="media badge independent">
<a href="#" class="media-item">
<img src="http://placehold.it/250x150"/>
</a>
<div class="media-body">
<p><strong>Independent</strong></p>
<p>We’re the only independent user review site for wedding suppliers. Businesses can’t vet reviews on their listing – that’s why your customers trust us.</p>
</div>
</div>
<div class="media badge flipped verified">
<a href="#" class="media-item">
<img src="http://placehold.it/250x150" />
</a>
<div class="media-body">
<p><strong>Verified</strong></p>
<p>All reviews and reviewers are verified. Each user fills in their personal details and verifies their profile with a wedding date and a picture. The result is an authentic, trustworthy review system.</p>
</div>
</div>
<div class="media badge interactive">
<a href="#" class="media-item">
<img src="http://placehold.it/250x150" />
</a>
<div class="media-body">
<p><strong>Interactive</strong></p>
<p>Passive display advertising has limited impact. We provide a unique opportunity to actively engage with potential customers and showcase the great service at the heart of your business.</p>
</div>
</div>
<div>

Answer 2

h2, p {
margin: 0;
}
.section {
border: 1px solid red;
display: inline-block;
width: 100%;
}
.section:nth-child(odd) img {
float: left;
margin-right: 15px;
}
.section:nth-child(even) img {
float: right;
margin-left: 15px;
}
<div class="badgesblock">
<div class="section independent">
<img src="http://placehold.it/100x100" />
<div class="independentCopy">
<h2>Independent</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
</div>
</div>
<div class="section verified">
<img src="http://placehold.it/100x100" />
<div class="verifiedCopy">
<h2>Verified</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
</div>
</div>
<div class="section interactive">
<img src="http://placehold.it/100x100" />
<div class="interactiveCopy">
<h2>Interactive</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
</div>
</div>
</div>
You don't have to do it like I did. I'm using some new (to you) css selectors like nth-child which makes it easier for me. But if you want to target by class or whatever, feel free. I just gave you an idea of what kind of css you need to achieve what you want.
Think of .section:nth-child(odd) like:
.section.independent img,
.section.interactive img { }
http://codepen.io/pacMakaveli/pen/jPEegN