Floating 2 divs inside of a position relative div - html

Question

I have a question about floating 2 divs inside of a position relative div. They should float left, but it does not work. I tryed it a few times by rewriting the CSS in developer tools. I hope someone can help me. I use the MDL (Material Design Lite) responsive framework from Google Inc. The result should look like in the screenshot. Thanks in advance for your help.
Final result
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
h4 {
font-size: $card-title;
color: $dark-text;
margin-left: 12px;
margin-top: 3px;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: absolute;
width: 117px;
img {
height: 100%;
position: absolute;
width: 100%;
}
.circle-check {
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
}
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="../assets/cards/card-img-10.png" alt="sera">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>

Answer 1

I couldn't really run your code, there are too many missing variables to be able to work off of that. So I redid the code. I hope this can help. You just need to manage your widths and float everything left:
Take a look at this jsFiddle.
EDIT: The jsFiddle link was incorrect at first. Reclick this link if code relates to something else entirely.
EDIT 2: Fixed padding error in code. And replaced jsfiddle link.
html:
<div class="header-area">
<div style="padding: 20px; ">
Yellow header
</div>
</div>
<div class="container">
<div class="element" style="background-color: green; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: red; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: orange; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
<div class="text">
This is the description
</div>
</div>
</div>
</div>
css:
.header-area{
background-color: yellow;
height: 100px;
width: 100%;
}
.container{
height: 100%;
width: 100%;
float: left;
background-color: lightblue;
}
.element{
float: left;
width: 50%;
height: 150px;
}
img{
float: left;
}
.description{
text-align: center;
}
.text{
padding-top: 50px;
}

Answer 2

I've made some modifications in your code, hope it can help you to completely achieve your goal:
To position your text over the img, you need to relative position their parent, and absolute position the text. Then you can move it over the img.
To easily align the img with the other elements, I think is useful to wrap these elements and give them an inline-block display. Then you can adjust them at the position you want.
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
}
h4 {
font-size: $card-title;
color: $dark-text;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: relative;
width: 117px;
}
.circle-check {
position: absolute;
top: 0;
left: 0;
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
}
.info-wrapper{
display: inline-block;
vertical-align: top;
}
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="http://sweetclipart.com/multisite/sweetclipart/files/ff0000%20Color%20Square%20RGB%20Red.png" alt="sera" width="100px">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="info-wrapper">
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>
</div>