html - divs are displaying behind footer -
im using css code:
/* status update page style */ #content_wrapper { display: inline; width: 80%; padding: 0; margin: 0 auto; } #content_update { display: block; float: left; padding: 20px; margin-top:20px; width: 100%; background-color: #eee; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.5); } #content_maintainance { display: block; float: left; padding: 20px; margin-top:20px; width: 100%; background-color: #eee; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.5); } #content_sidebar { display: block; float: right; width: 230px; padding: 20px; background-color: #eee; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.5); } /* footer */ #footer { width:100%; height:580px; position:absolute; bottom:0; left:0; border-top:4px solid #ed1c24; background-color:#eeeeee; } #footer-inner { width:80%; margin:0 auto 0 auto; height:inherit; } #footertop { width:100%; height:480px; padding-top:10px; border-bottom:2px #000000 solid; } #footertopleft { width:30%; height:420px; float:left; display:inline; margin-top:10px; padding:0 15px 10px 15px; border-right:1px solid #000000; } #footertopmid { width:30%; height:420px; float:left; display:inline; margin-top:10px; padding:0 15px 10px 15px; border-right:1px solid #000000; } #footertopright { width:30%; height:420px; float:left; display:inline; padding:0 15px 10px 15px; }
but divs displaying behind footer divs. have created fiddle here can see html - http://jsfiddle.net/wmrhc/
it's because have set footer div
absolutely positioned @ bottom of browser window height of 580px
. takes div
out of regular document flow, means other elements can start hiding behind it, , since 580px
high, other elements on page will hide behind it. fix setting z-index
on footer -1
, that's not after, mean div
's start floating on top of footer instead of behind footer, , still doesn't pretty.
you should rid of absolute positioning have set currently, , maybe @ css sticky footer approach let set footer sticks bottom of page instead of bottom of browser window.
Comments
Post a Comment