CSS: Make an image to bleed outside parent container - html

Question

Here is the look I want to achieve:
I'm using SkeletonJS 16-column grid framework. Here is the relevant code:
<div class="container section" id="features">
<div class="one-third column">
<h5 class="underline">Waterproof</h5>
<div class="textbox">
<p>Lorem ipsum</p>
</div>
</div>
</div>
.section h5 {
font-size: 1.2rem;
text-transform: uppercase;
}
.section h5.underline {
color: #437356;
background: #f4f0e4;
margin: 12px 0 12px 0;
border-radius: 2px;
padding: 8px 12px;
font-weight: 700;
}
My ultimate goal is to transform an h5 underline into this:
<h5 class="underline">Waterproof<img class="image" src=""/></h5>
and therefore to find an elegant set of CSS rules to make the image look like on attached design. I'm still an apprentice in CSS, so if everyone has a solution for that please drop me a potion or two. Thanks!

Answer 1

You can float the image. Floating an image takes it out of the normal content flow, which means it won't take up space the way it normally does, but text and other inline elements will "notice" it and wrap around it.
.underline > img {
float: right;
position: relative;
top: -20px;
}
jsFiddle: http://jsfiddle.net/kgpLomct/
Or you can use absolute positioning. An absolute positioned item is completely removed from the document flow, text and other elements will act like it isn't there, and will position itself according to the nearest positioned ancestor element.
.section h5.underline {
/* ... */
/* make sure this is set! */
position: relative;
}
.underline > img {
position: absolute;
top: -10px;
right: 10px;
}
jsFiddle: http://jsfiddle.net/kgpLomct/1