help with div positioning.......

[adrianmak]

pushing a div (featured) with negative top, the sibling div (footer) will not push up accordingly.

As a result, a large empty space appear between two divs.

sample code is here

http://codepen.io/adrianmak/pen/qZRqwy

any solution of the footer div to stick with the featured div, no matter it's top positioning value

<div class="wrapper">
   <div class="header">

            </div>
            <div class="featured">

            </div>
            <div class="footer">

            </div>
</div>

css

        .header { 
        background: green;
        
        height:620px;
        }
        .footer {
        background: blue;
        
        height:200px;
        }
        .featured {
        background: yellow;
        width:500px;
        height:420px;
        margin:0 auto;
        position: relative;
        top: -200px;
        }
        </style>

[Sergio]

Give the footer a position relative and change, on the featured, the negative top to a negative margin.

.footer {
        background: blue;
        position: relative;
        top:0;
        height:200px;
        }
.featured {
        background: yellow;
        width:500px;
        height:420px;
        margin:-200px auto 0;
        position: relative;
        }

[adrianmak]

Give the footer a position relative and change, on the featured, the negative top to a negative margin.

.footer {
        background: blue;
        position: relative;
        top:0;
        height:200px;
        }
.featured {
        background: yellow;
        width:500px;
        height:420px;
        margin:-200px auto 0;
        position: relative;
        }

The featured div margin should be

  margin: 0 auto -200px;

[pwired]

If you want the footer automatically pushed down with any content in the featured section,

you have to remove the featured height.

[Martijn Geerts]

You want something like this?:

 

http://codepen.io/Da-Fecto/pen/aNppXr