I am trying to create an html like the one attached here.
I am able to create top, middle n bottom divs. On the middle div, I need to have another div with the white background for keeping an image on left and some text on right. On the bottom part of the middle div, I need to place some text .
Then on the bottom div, I need to place some other text.
The basic structure has come up. But I would need some help on the overlay portion of the middle div. I am not sure how to place the white portion of the middle div as shown in the attachment.
It would be great if someone could help me on this.
I have created a fiddle for the same http://jsfiddle.net/b2LNc/15/
<div id="top" class="top">
<div id="text"></div>
</div>
<div id="middle" class="middle">
<div id="productdetail" class="productdetail">
<div id="image" class="image_container">
<img id="product" class="product" src="">
</div>
</div>
</div>
<div id="bottom" class="bottom">
<h1>heading comes here</h1>
<div id="desc">
Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here
</div>
</div>
css
#top {
background-color: #777777;
width: 977px;
margin-left: auto;
margin-right: auto;
height:120px;
}
#text{
background-image:url("");
background-repeat: no-repeat;
height: 60px;
}
#middle {
background-color: #f1f1f1;
width: 977px;
margin-left: auto;
margin-right: auto;
height:400px;
}
#bottom {
background-color: #e1e1e1;
width: 977px;
margin-left: auto;
margin-right: auto;
}
#bottom h1{
padding: 25px 0 0px 37px;
margin-bottom: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin-top: 0px;
}
#desc{
padding: 10px 10px 20px 40px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
color: #959595;
line-height: 20px;
}