Div CSS overflow push subsequent div lower

Question

I am trying to make div1 occupy 80% of the screen height, and div2 occupy 20% of the screen height. If div1 though has too much content and overflows, then div2 should be pushed under it and not on top of it. For some reason though, the overflow:visible is not working, div2 remains on top of div1, with div1 content underneath it. Thanks.

<div style="width:100%; height:80%; overflow:visible;">
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
<div style="width:100%; height:20%;" class="footerbar">
    <asp:PlaceHolder ID="plFooter" runat="server"></asp:PlaceHolder>
</div>

overflow visible means the content will goes outside the div but it doesn't mean it will go above div2. div2 is inserted after div1 and therefor layer wise is above it, I don't think you can avoid using z-index if you want div1 to goes on top of div2 when it has more content that allowed by the 80%. — GillesC
– GillesC, Commented Jun 10, 2014 at 18:08
Also note if you need to support multiple browsers/devices that percentage based height in CSS are poor. To be honest for what you need sounds like overflow:auto is more what you are after so people can just scroll the div if the content is longer, it's often an expected UX. — GillesC
– GillesC, Commented Jun 10, 2014 at 18:11

rageit · Accepted Answer · 2014-06-10 18:23:15Z

1

You may use positioning and minimum height in the following way:

<div class="container">
    <div class="body">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
    </div>
    <div style="" class="footerbar">
        <asp:PlaceHolder ID="plFooter" runat="server" />
    </div>
</div>

CSS:

.container{
    background-color: green; 
    min-height: 300px; 
    position:relative;
}
.body{
    width:100%; 
    min-height:80%; 
    background-color:green;
}
.footerbar{
    width:100%; 
    min-height:20%; 
    background-color: yellow; 
    position: absolute; 
    bottom: 0;
}

JSFiddle Demo

answered Jun 10, 2014 at 18:23

rageit

3,6311 gold badge29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wayofthefuture Over a year ago

Please look at jsfiddle.net/GugQN/1 ... I updated yours... I need the footer to always be at the bottom, unless the content is too long, then move down... With yours the footer doesn't stay at the bottom. Thanks

wayofthefuture Over a year ago

Ok, I figured it out! Your answer helped, Thanks. jsfiddle.net/GugQN/4 Also this site helps big time: learnlayout.com/toc.html

pale_rider · Accepted Answer · 2014-06-10 18:30:35Z

0

If you want div1 to be on top of div2, give div1 a higher z-index than div2.

answered Jun 10, 2014 at 18:30

pale_rider

3091 gold badge3 silver badges14 bronze badges

Collectives™ on Stack Overflow

Div CSS overflow push subsequent div lower

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related