Make div go under another - html

Question

I am trying to get the content that is highlighted in red in the screenshot below to go where the green lines are, however I cannot get it to work. I have tried clear:both; and clear:left; which both haven't worked. Both of them position it where it is in the screenshot:
Here is my code for the box and that part of the page:
.contentcontainer{
width:100%;
background:#FFF;
border-bottom: medium solid #d13f4a;
margin-top:20px;
height:110px;
}
.cctitle{
margin-top:20px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:15px;
font-weight: 400;
float: left;
}
.cctext{
width: 535px;
max-height: 35px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:13px;
font-weight: 400;
overflow:hidden;
clear:left;
float: left;
}
.ccthumb{
float: left;
background: #000;
width: 195px;
height: 110px;
}
<div class="contentcontainer">
<div class="ccthumb">
</div>
<div class="cctitle">Title Goes Here</div>
<div class="cctext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

Answer 1

Try removing floats:
.cctitle, .cctext { float: none; }
The issue is with the clear: left in .cctext. It is wrapping around all your floats. From looking at this, it looks like you might not need as many.

Answer 2

Remove your styles to .cctext and .cctitle and put there just (of course, leave there font-size, etc. - I made the code simple as possible).
.cctitle, .cctext {margin: 0 0 0 210px;}
http://jsfiddle.net/qukpcq8f/2/
The main task is to remove float, clear and overflow.

Answer 3

Your div is being pushed down because it is too wide. Remove width:
.contentcontainer{
width:100%;
background:#FFF;
border-bottom: medium solid #d13f4a;
margin-top:20px;
height:110px;
}
.cctitle{
margin-top:20px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:15px;
font-weight: 400;
}
.cctext{
max-height: 35px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:13px;
font-weight: 400;
overflow:hidden;
}
.ccthumb{
float: left;
background: #000;
width: 195px;
height: 110px;
}
<div class="contentcontainer">
<div class="ccthumb">
</div>
<div class="cctitle">Title Goes Here</div>
<div class="cctext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

Answer 4

You can put a wrapper around your title and text and use float: left; on it
fiddle
http://jsfiddle.net/Hastig/4e9socmv/5/
Make sure you stretch the view pane so its wide enough so as the content div isn't pushed below due to too narrow a width.
another fiddle where you just have to float the thumb
http://jsfiddle.net/Hastig/4e9socmv/4/