The following applies to 3-column site, left col width = right col width. Centre column has no prescribed width as it flexes.
The footer always sits at bottom of screen unless pushed down further by content (see margin-left and margin-right css settings)
As left and right column workings are same, for brevity only left column workings are shown.
A. admin > configuration > layout settings
Column Width - Left 26%
Column Width - Right 26%
Note 1: both settings are superfluous (could be blank) as now controlled by css
B. includes\templates\MY_TEMPLATE\common\tpl_box_default_left.php
<!--// bof: <?php echo $box_id; ?> //-->
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
replaced by responsive code
<!--// bof: <?php echo $box_id; ?> //-->
<?php if (COLUMN_WIDTH == '0'){ ?>
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<?php } else { ?>
<div class="leftBoxContainer <?php echo $minWidthHide; ?>" id="<?php echo str_replace('_', '-', $box_id ); ?>">
<?php } ?>
C. includes\templates\MY_TEMPLATE\common\tpl_main_page.php
if (!isset($flag_disable_left) || !$flag_disable_left) {
?>
<td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
<?php
/**
* prepares and displays left column sideboxes
*
*/
?>
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div></td>
<?php
}
?>
replaced by
if (!isset($flag_disable_left) || !$flag_disable_left) {
?>
<div id="navColumnOne" class="columnLeft"> <!-- removed 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>
<?php } ?>
```Note 2: COLUMN_WIDTH_LEFT width setting now in stylesheet.css and responsive.css as width: under id=navColumnOne
D. includes\templates\MY_TEMPLATE\css\stylesheet.css
#navColumnOne {
position:relative; /* ie needs this to show float /
width:26%; / this is the COLUMN_WIDTH_LEFT setting /
float:left;
margin-left:-26%; / must be same as width /
margin-right:1px; / makes element 1px smaller than width otherwise won't push footer down */
padding-top:1.5em;
padding-bottom:1em;
z-index:1;
}
.columnLeft {/* width:26%; / / see #navColumnOne /} / this is superfluous, should be deleted */
Note 3: class="columnLeft" in stylesheet.css is superfluous, should be deleted
E. includes\templates\MY_TEMPLATE\css\responsive.css
#navColumnOne {
float:left; /* only for smallest screen size, otherwise delete this /
width:10%;%; / this is the COLUMN_WIDTH_LEFT setting /
margin-left:-10%; / must be same as width */
}
Note 4: /* settings vary depending on screen size*/
.columnLeft { display:none; } /* only used to turn off sideboxes on small screens */
Note 5: class="columnLeft" in responsive.css only ever contains display:none for small screen sizes