html - Crazy div structure CSS - help please -
i'm trying layout (see image: http://www.pricedesignstudio.com/download/divs.png) , having issue...i bottom, 100% width (footerbottom) footer expand upward to fill vertical space between bottom content block (containera) , bottom of page. have similar working using absolute positioning , z-index of additional footer, don't think it's optimal. anyway, easier show code explain think. please let me know if have input. in advance!
html, body { text-align: center; margin: 0; padding: 0 0 0 0; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background: #fff url(images/bkgrnd_main.png) repeat-y center top; } .container { width: 970px; min-height: 95%; position: relative; border: none; text-align: center; margin: 0 auto 0 auto; padding: 0 0 0 0; position:relative; } .containera { display:block; min-height: 300px; position: relative; border: none; text-align: left; margin: 0 0 0 -10px; padding: 0 12px 0 0; position:relative; background:#fff; z-index:100; } .containerb { display:block; min-height: 300px; position: relative; border: none; text-align: left; margin: 0 -10px 0 0; padding: 0 12px 0 0; position:relative; background:#fff; z-index:100; } .container .inner { display:block; width:94%; font-family: helvetica, arial, sans-serif; font-size: 12px; line-height:150%; color: #666; padding:12px 0 20px 0; margin:0 auto; border-top:solid 1px #ccc; } #header { height: auto; width: 100%; padding: 12px 0 12px 12px; margin: 0 0 0 0; background-color: #fff; display: block; float: none; clear: both; position:relative; text-align: left; } #headertop { padding: 0 0 0 0; margin: 0 0 0 0; background-color: #fff; display: block; min-height:80px; width:100%; position:absolute; top:1; z-index:0; } #footer { width: 100%; height:100%; margin: 0 0 0 0; padding: 8px 0 0 0; background-color: #fff; display: block; float: none; clear: both; text-align: center; position:absolute; bottom:0; z-index:1; } #footerbottom { font-family: helvetica, arial, sans-serif; font-size: 12px; color: #999; padding: 0 0 0 0; margin: 0 0 0 0; background-color: #fff; display: block; min-height:60px; width:100%; position:absolute; bottom:1; z-index:0; text-align:center; } <div id="headertop"></div> <div class="container"> <div id="header"></div> <div class="containera"></div> <div class="containerb"></div> <div class="containera"></div> <div id="footer"></div> </div>
100% on container white background , undoing footer 100% height kind of trick. not exact, ok.
Comments
Post a Comment