我需要让内容出现在 contentheader div 下方并包装 imagebox div 并且不与 imagebox div 重叠。p 内容应围绕 contentheader 和 imagebox。
这是它应该是什么样子的小提琴：http: //jsfiddle.net/NinjaSk8ter/nrJHP/
我的页面中有完全相同的代码，但是 p“内容”没有围绕 contentheader 和 imagebox“图像”：
http://www.northernvirginiapaintingcontractor.com/
这是标记：
<div id="mid-feature">
<div id="mid-featureleft" class="rounded">
<div class="contentheader">
<h1>Georgio Versari Painters & Artisans</h1>
</div>
<div class="imagebox">IMAGE
</div>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
</div>
<div id="mid-featureright" class="rounded">
</div>
<div style="clear: both;">
</div>
</div>
这是CSS：
#mid-feature {
width:925px;
margin:0 0 0 0;
position:relative;
/*overflow:hidden;*/
/*background-color:Olive;*/
}
#mid-feature h1 {
color: #399DD6;
font-family: Arial;
font-size:17px;
}
/*#mid-feature p {
color: #0C2A55;
margin:29px 0 0 0;
position: absolute;
font-size:12px;
float: left;
z-index: 3;
line-height:14px;
padding: 5px 5px 5px 5px;
}*/
#mid-featureleft {
height:250px;
width:609px;
margin: 12px 0 0 0;
float:left;
position:relative;
background-color:#E7EFF7;
}
#mid-featureleft p {
/*color: #0C2A55;*/
color:Red;
margin:0;
font-size:12px;
line-height:14px;
margin-top: 27px;
padding: 5px 5px 5px 5px;
}
#mid-featureleft .contentheader {
height:29px;
width:286px;
text-align:left;
line-height:29px;
display: block;
float: left;
margin:0 0 0 0;
padding: 0 0 0 6px;
position:relative;
z-index: 1;
background-color:red;
}
#mid-featureleft .contentbox {
height:250px;
width:609px;
display: block;
float: left;
margin:0 0 0 0;
position:absolute;
background-color:blue;
}
#mid-featureleft .imagebox {
height:200px;
width:292px;
display: block;
float: right;
margin:0 0 0 317px;
position:absolute;
z-index: 2;
background-color:green;
}
如果有人能告诉我为什么这在 Fiddle 中有效，但在我的页面中无效，我将不胜感激。