-1

enter image description here

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;
}
2
  • hi, if you provide desire output image than it will be great to understand Aug 20, 2015 at 7:14
  • @viralPathak - Thanks for the reply. You could consider the image size as 380x380px size. The html template needs to be like the one which I have attached. Aug 20, 2015 at 7:24

2 Answers 2

1

The overlay effect is made by specifying a position: relative; for the middle container, so to use it as reference system. The contained element #overlay has a relative positioning with a top: -20px; that pulls it up by 20px.

this update to your fiddle will solve the issue with the middle div.

HTML

<div id="container">
    <div id="top" class="top">
        <div id="text"></div>
    </div>
    <div id="middle" class="middle">
        <div id="overlay">
            <div id="productdetail" class="productdetail">
                <div id="image" class="image_container">
                    <img id="product" class="product" src="">
                </div>
                <div id="descr">
                </div>
            </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>
</div>

CSS

#container {
  position: relative;
}
#top {
  background-color: #000;
  width: 977px;
  margin-left: auto;
  margin-right: auto;
  height: 120px;
}
#text {
  background-image: url("");
  background-repeat: no-repeat;
  height: 60px;
}
#middle {
  background-color: #f1f1f1;
}
#overlay {
  background-color: #fff;
  width: 90%;
  height: 400px;
  position: relative;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}
#bottom {
  background-color: #e1e1e1;
  width: 977px;
  margin-left: auto;
  margin-right: auto;
  /* height:120px;*/
}
#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;
}
#productdetail {
  background-color: white;
  position: relative;
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#image {
  border: 3px #000 solid;
  display: inline-block;
  margin: 5px;
  width: 50%;
  min-height: 100px;
}
#descr {
  border: 2px #000 solid;
  display: inline-block;
  margin: 5px;
  min-height: 100px;
  width: 40%;
}
2
  • yes indeed - I have updated the fiddle with z-index. is it correct? jsfiddle.net/b2LNc/17 Aug 20, 2015 at 7:47
  • See my updated answer and fiddle; there is no need to specify a z-index on the product div, since in this case inner divs are stacked by default (the inner one is the upper most). Aug 20, 2015 at 7:51
0

Try this markup I created, its clean and much less.

HTML

<div class="wrapper">
    <div class="top"></div>
    <div class="mid">
        <div class="container">
            <p>Some Text Here</p>
            <div>IMAGE HERE</div>
            <div>DESCRIPTION HERE</div>
        </div>
    </div>
    <div class="bot"></div>
</div>

CSS

html, body, .wrapper { height: 100%; }
.wrapper { position: relative; }
.top { height: 15%; background: #222; }
.mid { height: 70%; background: #CCC; }
.bot { height: 15%; background: #777; }
.container { 
    position: absolute;
    background: #FFF; 
    padding: 20px; 
    width: 80%;
    top: 10%;
    left: 50%;
    margin-left: -40%;
    clear: both;
}
.container > div {
    float: left;
    width: 42%;
    height: 250px;
    padding: 1%;
}
.container > div:first-child {
    background: #EEE;
    float: left;
    width: 54%;
}
.container > p {
    position: absolute;
    bottom: -100px;
    right: 0;
    border: 1px solid #EEE;
    width: 50%;
    height: 70px;
}

JSFiddle : https://jsfiddle.net/b289cqkz/1/

I predetermined the heights of .content > divs and .content > p for I don't have the exact text data. You can remove the heights and insert your real data to adjust accordingly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.