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>
    <ul id="nav">
        <li><a href="#">Link One</a></li
        ><li><a href="#">Link Two</a></li
        ><li><a href="#">Link Three</a></li
        ><li><a href="#">Link Four</a></li>
    </ul>        
    <div id="inner">
        <div id="left">
            <h2>Left 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="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 is a demo.</p>
        </div>          
    </div><!--end inner-->
    <div id="faux-lt"></div><!--BG color left column-->
    <div id="faux-rt"></div><!--BG color right column-->
</div> <!--end wrapper-->          
    
<div id="footer"><!--footer sits outside of wrapper--> 
    <p>Sticky Footer Here</p>
</div> <!-- end footer -->

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*/

display:table;
}
#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 Nav Styles ===*/
#nav{
    width:100%;/*IE haslayout*/
    margin:0;
    padding:0;
    background:#F5DEB3;/*#FFC473;*/
    border-bottom:1px solid #000;
    text-align:center;/*center the list items*/
    list-style:none;
    position:relative;
    z-index:3;
}    
#nav li{
    display: -moz-inline-box;/* for FF2 (inline-box must be used for shrink wrapping)*/
    display:inline-block;/* for modern browsers */
    margin:0 -1px; /*use -1px L&R to kill double borders*/
    border-left:1px solid #000;
    border-right:1px solid #000; 
}
* html #nav li{display:inline;}/* inline-block trigger for IE6 */
*+html #nav li{display:inline;}/* inline-block trigger for...