JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div class="Container">
        <div class="Header">
            <h1>Header</h1>
            <p>if The Header height is not fixed, It will span excatly his needed space.</p>
            <p>The Padding/Margin between the header and the content and around the layout is optional</p>
        </div>
        <div class="HeightTaker">
            <div class="Wrapper">
                <div class="LeftNavigation">
                    <h1>Left navigation</h1>
                    <p>The width of the left navigation is not fixed.</p>
                    <p>the left navigation will always span 100% height</p>
                </div>
                <div class="Content">
                    <h1>Content</h1>
                    <p>The Content div should always span the available Container space.</p>
                    <p>If the content exceed the Content available space, it will scroll.</p>
                    <p><a target="_blank" href="http://jsfiddle.net/avrahamcool/58mkp/">Here's a demo of this scenario</a></p>
                    <p class="Important">This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
                </div>
            </div>
        </div>
    </div>

CSS

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container, .LeftNavigation, .Content
{
    height: 100%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.HeightTaker
{
    position: relative;
    z-index: 1;
}

    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }

.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.LeftNavigation
{
    float: left;
}
.LeftNavigation, .Content
{
    overflow: auto;
}


/*For demonstration only*/
.Header
{
    background-color: #bf5b5b;
    text-align: center;
}

.LeftNavigation
{
    background-color: #6ea364;
}
.Content
{
    background-color: #66cab7;
    text-align: center;
}
p
{    
    font-size: 1.3em;
}
.Important
{
    font-weight: bolder;
    color: white;
}