CODEWITHSUNDEEP
htmlcss
factordog
factordog

Reputation: 597

Relative div positioning?

Im having a problem of getting a relative div to stack below an absolute div.

There is a video that scales its height based on the width of the browser, I then had to get a div to position itself directly below it, using an absolute position I was able to achieve this with .contain

I then however need to make it so that I can place other divs below that .contain. With the fiddle I am trying to get the green bar positioned relative (.para1) below the positioned absolute (.contain). I could use a negative margin to fix the issue quickly, but then when placing more divs below .para1 I would have to have the same margin below each of them.

Here is the fiddle for a full illustration: http://jsfiddle.net/L232uhpr/

The code in question:

HTML:

    <div class="contain">
        <div class="divider">
            <div class="txt_wrap">
                <p class="center_h1">WHAT I DO</p>
            </div>
        </div>
    </div>
    <div class="para1">
        <div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png">
        </div>
    </div>

CSS:

/*divider*/
.contain .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 10px;
  z-index: -1;
}
.divider{
    width: 100%;
    height: 100px;
    background-color: #ccc;
}
.txt_wrap{
    width: 160px;
    margin-left: 45%;
}
/*Parallax 1 Styling*/
.para1{
    width: 100%;
    height: 100px;
    position: relative; 
    background: green;
}

Upvotes: 0

Views: 72

Answers (2)

sandeep pandharpure
sandeep pandharpure

Reputation: 39

You can add there padding bottom in CSS so remove it:

.contain .divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* padding-bottom: 10px; */
    /* z-index: -1; */
}

Upvotes: 1

ganesh satpute
ganesh satpute

Reputation: 391

I think It's having padding-bottom:10px by removing it you will get your desired output

    .contain .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* padding-bottom: 10px; */
  z-index: -1;
}

Please check http://jsfiddle.net/L232uhpr/2/

Upvotes: 0

Related Questions