Hi Kobra
I thought I would post this Footer Always At Bottom Of Screen code here first as it was built using your??? Lavender template and is based on the three column fluid design design of pmob.
Please note that while this works for me, I cannot really explain how it works, or why it may fail for others.
The following is the skeletal framework of
\includes\templates\your_template\common\tpl_main_page.php.
The key elements are the divs and their order of placement.
<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
<!-- bof header -->
<!-- eof header -->
<div id="mainWrapper">
<div id="clearheader"><!-- to clear header --></div>
<div id="contentMainWrapper">
<!-- bof navColumnOne -->
<div id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div>
</div>
<!-- eof navColumnOne -->
<!-- bof navColumnTwo -->
<div id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">
<div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div>
</div>
<!-- end navColumnTwo -->
<!-- bof center content -->
<!-- eof center content -->
</div><!-- end contentMainWrapper -->
<div id="clearfooter"><!-- to clear footer --></div>
</div><!-- end mainWrapper -->
<!-- bof footerWrapper -->
<div id="footerWrapper">
</div><!-- eof footerWrapper -->
</body>
The following is the key ingredient of
\includes\templates\your_template\css\stylesheet.css
html, body {
height: 100%;
max-width: 1300px;
margin:0 auto;
}
* html {height:100%;}
body {
margin: 0;
padding: 0;
border: 0;
}
#mainWrapper {
position:relative;
min-height: 100%;
margin-left:20%; /* adjustable */
margin-right:20%; /* adjustable */
}
* html #mainwrapper { height:100%;} /* for mozilla as IE treats height as min-height anyway */
#clearheader { /* needed to make room for headerWrapper */
height:140px;
}
#headerWrapper {
position:absolute;
top:0px;
left:0px;
width:100%;
height:140px; /* same as clearHeader height */
}
/* mac hide \*/
* html #headerWrapper {height: 140px; he\ight: 1px} /* height needed for ie to force layout*/
/* end hide */
#contentMainWrapper {
position:relative;
width: 100%;
margin: 0 auto;
}
.centerColumn {
width: auto;
padding: 0 1em;
}
/* mac hide\ */
* html #centerColumn {height:1%;} /* combat IE's 3 pixel jog */
/* end hide */
#navColumnOne {
position:relative; /* ie needs this to show float */
float:left;
margin-left:-27%; /* note negative sign, value same or slightly larger than Layout Settings COLUMN_WIDTH_LEFT */
margin-right:1px; /* makes element 1px smaller than width otherwise won't push footer down */
}
#navColumnTwo {
position:relative; /* ie needs this to show float */
float:right;
margin-right:-27%; /* note negative sign, value same or slightly larger than Layout Settings COLUMN_WIDTH_RIGHT*/
margin-left:1px; /* makes element 1px smaller than width otherwise won't push footer down */
}
#navColumnOneWrapper {
margin: 0 auto; /* required */
}
#navColumnTwoWrapper {
margin: 0 auto; /* required */
}
#clearfooter { /* needed to make room for footer */
clear:both;
height:130px; /* height of footer */
}
#footerWrapper {
clear: both;
position: relative;
bottom: 0px;
height: 130px; /* Height of the footer */
margin-top: -130px; /* negative value drags footer back into page */
width: 100%;
}
* html #footerWrapper { /* only ie gets this style */
\height:130px; /* for ie5 */
he\ight:128px; /* for ie6 */
}
Admin > Configuration > Layout Settings
Column Width - Left Boxes 96%
Column Width - Right Boxes 96%
Column Width - Left 25%
Column Width - Right 25%
Enjoy.
