Jump to content

help with div positioning.......


adrianmak
 Share

Recommended Posts

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>
Link to comment
Share on other sites

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;
        }
  • Like 1
Link to comment
Share on other sites

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;

Link to comment
Share on other sites

 Share

×
×
  • Create New...