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

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -