i've found method of placing footer like, except fact footer overlaps content when page resizes.
using structure , formatting have already, how can "clear" footer, drops off when page resizes (avoiding overlap of #content)?
i've tried clear: left , nothing this.
essentially, want footer visible, , attached lower left of window, long space allows; however, when window gets smaller, don't want footer overlap content.
css:
* { margin: 0; padding: 0; } html { height: 100%; } body { background-size: cover; margin: 0; height: 100%; } #wrapper { min-height: 100%; height: 100%; min-width: 900px; overflow: hidden; } .main_nav { margin: 0; width: 160px; float: left; padding-left: 40px; overflow: hidden; } #content { float: left; width: 750px; height: 600px; } #footer { position: absolute; bottom: 0px; width: 100%; height: 50px; } html:
<body> <div id="wrapper"> <div id="header"> <h1></h1> <ul class="main_nav"> <li></li> </ul> </div> <div id="content"> </div> </div> <div id="footer"> <div id="footer_content"></div> </div> </body>
the answer has been choosen, wanted give alternative.
the "wrapper" contains "header" , "content", while "footer" outside of it. could, example, add
z-index:10; to wrapper's css and
z-index:1; to footer's css.
this 1 last isn't needed, it's completeness. way, whenever in "touch", 1 higher z-index remain on foreground (ie, higher level on z-axis, axis perpendicular screen surface) , other elements slide behind, according own index.
Comments
Post a Comment