JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<div id="wrapper">  
    <div id="header">
        <h1>Min-Max Width Three Column with Sticky Footer</h1>          
    </div>    
    <div id="inner">
        <div id="right">
            <h2>Right Column</h2>
            <p>This is just some filler text to fill the empty space.</p>
            <p>This is just some filler text to fill the empty space.</p>
            <p>This is just some filler text to fill the empty space.</p>
        </div>
        <div id="main">
            <h2>Main Content</h2> 
            <p>This demo uses no extra markup in the html for Opera and IE8 compliance.</p>
            <p>Using a <code>body:before</code> float for Opera's page redraw bug.<br>
            Using a <code>wrapper:after</code> block with height:1%; for IE8's min-height:100%; bug.</p>
            <p>See <a href="http://www.css-lab.com/demos/stickfoot/stickfoot-2.html">Example#2</a> for a 
            method that uses a non-semantic dummy float in the html which will keep the CSS very simple.</p>   
            <p>Reduce viewport height to scroll content and test sticky footer.</p>      
            <p>Last line of text shows a dashed red border after #inner div's bottom-padding. It protects 
            the text from sliding under the footer which was pulled up with a negative top margin.</p>
        </div>          
    </div>
    <div id="faux-rt"></div><!--BG color right column-->
</div>     
    
<div id="footer">
    <p>Sticky Footer Here</p>
</div>

CSS

html, body {height:100%;}

body {   
    background:#A8A8A8;
    font:100% "courier new",arial,"trebuchet ms",tahoma;
    margin:0;padding:0;
}

/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix (Maleika)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
}
#wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
#inner:after { /* #inner:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/
    font-size:0;
}

/*===  Begin Layout Structure ===*/
#wrapper {
    max-width:1200px;
    min-width:700px;
    min-height:100%;/*height is determined from parent's height (html & body)*/ 
    margin:0 auto;  
    background:#FFF;/*this needs to be the same as #right bg color*/
    border-left:1px solid #000;
    border-right:1px solid #000;
    position:relative; /*establish containing block for AP #faux div*/
}
#header{
    height:78px;
    background:#E1DAC6;
    border-bottom:1px solid #000;
    text-align:center;
    font-weight:bold;
    position:relative;/*establish stacking order for z-index*/
    z-index:2;/*layer it above the #faux column*/
}

/*=== Begin Columns ===*/
#inner {
    width:100%;/*haslayout*/
    padding-bottom:61px; /*preserve footer space (plus 10px for text spacing)*/
    background:#FFF;/*set same as wrapper BG or none at all*/
    border-bottom:1px dashed red;
}
#right{
    float:right;
    width:180px;
    padding-left:1px;/*recover border from #faux-rt*/          
    position:relative;
    z-index:2;/*layer it above the #faux-rt column*/
}
#main{
    overflow:hidden;/*stop content from sliding under floated side columns(IE7 haslayout also)*/
    background:#FFF;/*same as #wrapper bg color (or remove it completely)*/
}
#footer {
    max-width:1200px;
    min-width:700px;
    position:absolute;/*establish...