Question

I need to have the Content appear below the contentheader div and wrap the imagebox div and not overlap the imagebox div. The p Content should surround the contentheader and imagebox.

Here is the Fiddle of what it should look like:
http://jsfiddle.net/NinjaSk8ter/nrJHP/

I have the exact same code within my Page, however the p “Content” does not surround the contentheader and imagebox “Image”:

http://www.northernvirginiapaintingcontractor.com/

Here is the markup:

    <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>

Here is the 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;
}

If someone could clue me in on why this works in Fiddle but not my page, I would appreciate it.

Answer 1

There are two differences between your fiddle and your code and that’s what’s causing the unexpected behavior. In your #mid-featureleft .imagebox definition, you are adding a position:absolute attribute, which is causing the green box to overlay the text. Then you have a margin:0 0 0 327px attribute which is pushing the text below the image.

If you remove those two attributes from your CSS, your wrapping behaves as it does in the fiddle.