Float Two Divs Side By Side - html

Question

I'm really sorry to post this. I've read dozens of posts on this same issue, but I just can't solve this. How do I place the blue and green boxes side-by-side? I've got plenty of space in my wrapping div, and I think that I am dealing with float correctly, but still incorrect results. What gives?
<div class="titleframe" >
<div class="image" >
<img id="thief" src="thief.png">
</div>
<div class="titletext">
<h1>My Title</h1>
<p>Line1<br>Line2<br>Line3</p>
</div>
</div>
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
}
.titletext{
position:relative;
float:left;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}

Answer 1

Add float:left; to your .image class. Here is a fiddle: http://jsfiddle.net/36KP5/
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}

Answer 2

Fiddle
You can either float the first one left, and add margin-left to the second one:
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}
.titletext{
position:relative;
margin-left: 101px;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}
Or you can float them both left.