css - 段落元素和 2 div 的问题

Question

我的段落内容有一个小问题，它被 2 个 div 包围：

http://jsfiddle.net/NinjaSk8ter/6sv5T/

我需要让内容出现在 contentheader div 下方并包装 imagebox div 并且不与 imagebox div 重叠。p 内容应围绕 contentheader 和 imagebox。

我尝试为内容标题和图像框应用 z-index，但没有成功。

但是，我确实为段落标签设置了 margin-top，以便内容会出现在 contentheader div 下方，但我认为这不是正确的方法。

我希望能够为内容应用“contentbox”类，但我不确定如何使这个 div 位于其他 contentheader 和 imagebox div 之外。

如果有人能告诉我这是如何完成的，我将不胜感激。

Answer 1

我已经重新安排了您的 HTML 和 CSS，您可以在此处看到：jsFiddle 示例。

HTML

<div id="mid-featureleft">
   <div class="imagebox">
   </div>

   <div class="contentheader">
      <h1>Georgio Versari Painters  Artisans</h1>
   </div>
   <p>Content Content Content Content Content Content Content Content Content Content Content Content</p>
</div>​

CSS

#mid-featureleft {
    height:250px;
    width:609px;
    margin: 12px 0 0 0;
    float:left;
    position:relative;
    background-color:#E7EFF7;
}
#mid-featureleft p {
    color: #0C2A55;
    margin:0;
    font-size:12px;
    line-height:14px; 
    padding: 5px 5px 5px 5px;
}
#mid-featureleft .contentheader {
    height:29px;
    width:286px;
    text-align:left;
    line-height:29px;
    margin:0 0 0 0;
    padding: 0 0 0 6px;
    float:left;
    background-color:red;
}

#mid-featureleft .imagebox {
    height:200px;
    width:272px;
    float: right;
    margin:0 0 0 20px;
    background-color:green;
}​