并排浮动两个分区

Question

我很抱歉发布这个。我已经在同一个问题上阅读了几十篇帖子，但我无法解决这个问题。如何将蓝色和绿色盒子并排放置？我的包装div中有足够的空间，我认为我正在处理浮动，但结果仍然不正确。是什么给了什么？

<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

将float:left;添加到.image课程。这是一个小提琴：http://jsfiddle.net/36KP5/

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

Answer 2

Fiddle

您可以向左浮动第一个，并向第二个添加margin-left：

.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;
}

或者你可以将它们左移。