Question

I am having a slight issue with my paragraph content that is surrounded by 2 divs:

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

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.

I have tried to apply a z-index for the contentheader and imagebox which has not worked.

I did however set the margin-top for the paragraph tag so that the content would appear below the contentheader div, but I don’t think that is the correct approach.

I was hoping to be able to apply the “contentbox” class for the content, but I am not sure how to enable this div to be outside of the other contentheader and imagebox div.

If someone could clue me in on how this is done I would appreciate it.

Answer 1

I’ve re-arranged your HTML and CSS as you can see here: jsFiddle example.

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