html - Float Two Divs Side By Side -

i'm sorry post this. i've read dozens of posts on same issue, can't solve this. how place blue , green boxes side-by-side? i've got plenty of space in wrapping div, , think dealing float correctly, still incorrect results. 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; } 

add float:left; .image class. here fiddle: http://jsfiddle.net/36kp5/

.image {     width:100px;     height:250px;     border: 1px solid blue;     float:left; }