Can someone help me make the original code from HTML5 Boilerplate Initializser, have the

Question

0

Asked: June 7, 20262026-06-07T23:24:07+00:00 2026-06-07T23:24:07+00:00

Can someone help me make the original code from HTML5 Boilerplate Initializser, have the

0

Can someone help me make the original code from HTML5 Boilerplate Initializser, have the footer stick to the bottom of the browser, I’ve tried all manor of codes from web examples but unfortunately I think as usual the boiler plates predefined CSS is affecting the positioning and “sticking” of the footer.

Heres my CSS:

 /* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%;}
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 0.9em; line-height: 1.4; height: 100%;}

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 0.9em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ===== Initializr Styles =====================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-tfont-sizeplate
   ========================================================================== */

body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }

.wrapper{
    width:90%;
    margin:0 5%;
    min-height: 100%;
}

/* ===================
    ALL: Blue Theme 
   =================== */

#header-container{ border-bottom: 20px solid #22558b; width:100% }
#footer-container{ border-top:    20px solid #22558b; width:100%}
#main aside      { border-top:    20px solid #22558b; }

#header-container,
#footer-container,
#main aside{
    background:#2c6cb1;
}

#title{color:white; }

::-moz-selection { background: #2c6cb1; color: #fff; text-shadow: none; }
::selection      { background: #2c6cb1; color: #fff; text-shadow: none; }

/* ==============
    MOBILE: Menu
   ============== */

nav a{
    display:block;
    margin-bottom:10px;
    padding:15px 0;

    background:#22558b;
    color:white;

    text-align:center;
    text-decoration:none;
    font-weight:bold;
}

nav a:hover, nav a:visited{
    color:white;
}

nav a:hover{
    text-decoration:underline;
}

/* ==============
    MOBILE: Main
   ============== */

#main{
    padding:30px 0;
}

#main article h1{
    font-size:2em;
}

#main aside{
    color:white;
    padding:0px 5% 10px;
}

#footer-container footer{
    color:white;
    padding:20px 0;
    clear:both;
    }

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }

/* ===== Primary Styles ========================================================
   Author: Christopher Leah of Happy Webs LTD - 07/2012
   ========================================================================== */
 .btn{clear:left;float:left; width:79px; margin-left:5px; margin-bottom:2px;}
.ColHead{float:left; width:50px; margin-left:5px; background-color:#22558B;color:#ffffff;margin-bottom:2px;}
.RowHead{clear:left;float:left; width:75px; margin-left:5px;background-color:#2C6CB1;color:#ffffff;margin-bottom:2px;}
.gridBoxes{float:left; width:50px; margin-left:5px; margin-bottom:2px;}
.graph{margin-top:10px;float:left;}
h3.left {float: left; width:49%;}
h3.right {float: right; width:49%; text-align:right;}
#footer-container a { color:#fff; text-decoration:none; }
#footer-container a:hover { text-shadow: 1px 1px 1px #000; }
.txtSmall {width:50px;}
#title a{color:#fff; text-shadow: 1px 1px 1px #000; text-decoration:none;}
.disclaimer { font-size:0.8em;}
.disclaimer a{ color:#22558B;}


/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */  
    nav a{
        float:left;
        width:27%;
        margin:0 1.7%;
        padding:25px 2%;
        margin-bottom:0;
    }   
    nav li:first-child a{ margin-left:0;  }
    nav li:last-child  a{ margin-right:0; } 
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li{
        display:inline;
    }   
    .oldie nav a{
        margin:0 0.7%;      
    }
}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

    #header-container,
    #main aside{
        -webkit-box-shadow:0 5px 10px #aaa;
           -moz-box-shadow:0 5px 10px #aaa;
                box-shadow:0 5px 10px #aaa;
    }

/* ============
    WIDE: Menu
   ============ */

    #title{
        float:left;
        text-shadow: 1px 1px 1px #000;
    }

    nav{
        float:right;
        width:38%;
    }

/* ============
    WIDE: Main
   ============ */

    #main article{
        float:left;
        width:57%;
    }

    #main aside{
        float:right;
        width:28%;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper{
        width:1026px; /* 1140px - 10% for margins */
        margin:0 auto;
    }
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

Heres my HTML:

<!doctype html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->

<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head id="Head1"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>

    Home - Upper Control Limit

</title><meta name="description" /><meta name="author" /><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="css/style.css" />

    <script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>



</head>

<body>

    <div id="header-container">

        <header class="wrapper clearfix">

            <h1 id="title"><a href="default.aspx" title="Upper Control Limit Homepage">Upper Control Limit</a></h1>

            <nav>

                <ul>

                    <li><a href="default.aspx">Home</a></li>

                    <li><a href="contact.aspx">Contact</a></li>

                </ul>

            </nav>

        </header>

    </div>

    <div id="main-container">

            <form method="post" action="default.aspx" id="Form1" enctype="multipart/form-data">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMzI4MjE1NjZkZO1bVtBx0KanNtHBuPKe20ZygwvsWgeEn3cRtL/CrOHU" />

</div>



<div class="aspNetHidden">



    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQK3heD7DwLHyoqxBgLHyuK8AQKDw8wMAt3oqtEMt6vvVJr549pcOORe6AIL/bfdHDA/UvYWb5jzHlW8pc0=" />

</div>



    <div id="main" class="wrapper clearfix">

            <article>

                <section>

                    <h2>Manual Data Entry</h2>



                    <label>Rows:&nbsp;</label><input name="ctl00$MainContent$txtRows" type="text" id="MainContent_txtRows" class="txtSmall" />

                    <label>Cols:&nbsp;</label><input name="ctl00$MainContent$txtCols" type="text" id="MainContent_txtCols" class="txtSmall" />

                    <p><em>*Maximum of 10 rows and/or 30 columns for this trial version.</em></p>

                    <p><input type="submit" name="ctl00$MainContent$btnGo" value="Go" id="MainContent_btnGo" /></p>

                    <br />

                 </section> 

                <section>

                    <h2>File Uploader</h2>



                    <p><input type="file" name="ctl00$MainContent$flUp" id="MainContent_flUp" />&nbsp;</p>

                    <p>(Maximum File Size: 3KB)<br /><em>*Do not include any column headers or text in your CSV.</em></p>

                    <p><input type="submit" name="ctl00$MainContent$btnUpload" value="Upload" id="MainContent_btnUpload" /></p>

                    <br />

                </section>  

                <section>

                    <h3>Disclaimer</h3>

                    <p class="disclaimer">Data uploaded or manually entered, is deleted immediately 

                        after processing. If you have concerns over your data or privacy, please read our <a href="disclaimer.aspx" title="UCL Disclaimer">disclaimer</a>.<br />If your data contains sensitive information, you should consider 

                        integrating the UCL engine within your system.  Please <a href="contact.aspx" title="Contact us">contact us</a> for more information. <br /></p>

                </section>              

            </article>                          

            <aside>

                <h3>About UCL</h3>

                <p>Control Charts have multiple applications in a wide variety of industries. They 

                    can help measure the effectiveness of manufacturing processes or the quality of 

                    service based industry.</p>

                <p>The UCL calculator has been developed by Data-Exchange Ltd as a side project 

                which was driven by the need to integrate this magic formula within various 

                business applications.</p>

                <h4>Upper Control Limit Formula</h4>

                <p><img src="img/ucl-formula.png" title="Upper Control Limit Formula" alt="Upper Control Limit Formula: X + 2.66* MR" /></p>

                <h4>Lower Control Limit Formula</h4>

                <p><img src="img/lcl-formula.png" title="Lower Control Limit Formula" alt="Lower Control Limit Formula: X - 2.66* MR" /></p>

            </aside>

    </div>



            </form>

    </div> <!-- #main-container -->

    <div id="footer-container">

        <footer class="wrapper clearfix">

            <h3 class="left">Copyright © 2012 <a href="http://www.data-exchange.co.uk/" title="Data Exchange Ltd">Data Exchange Ltd</a></h3>

            <h3 class="right"><a href="http://www.perfect-flow.com/" title="PerfectFlow Ltd" ><img alt="PerfectFlow" border="0" src="img/perfectflow.gif" /></a></h3>

        </footer>

    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>    window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

<script src="js/script.js"></script>

<script type="text/javascript">

    var _gaq = _gaq || [];

    _gaq.push(['_setAccount', 'UA-17073042-4']);

    _gaq.push(['_trackPageview']);

    (function () {

        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

    })();

</script>

</body>

</html>

Thanks for any help guys!

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-07T23:24:11+00:00

Editorial Team

2026-06-07T23:24:11+00:00Added an answer on June 7, 2026 at 11:24 pm

If your styles come after the CSS from Boilerplate, that should apply. It’s the beauty of CASCADING stylesheets. Trying using position:fixed and bottom:0px for your footer.

#footer-container {
  position:fixed;
  bottom:0px;
  width:100%;
}

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

Can someone help me make the original code from HTML5 Boilerplate Initializser, have the

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply