Layout concept test

by Admiral Potato

HTML

<div id="header">
    <ul class="nav">
        <li><a href="http://example.com/">A</a></li>
        <li><a href="http://example.com/">B</a></li>
        <li><a href="http://example.com/">C</a></li>
    </ul>
</div>

<div id="breadCrumbHolder">
    <ul class="nav">
        <li><a href="http://example.com/">U</a></li>
        <li><a href="http://example.com/">V</a></li>
        <li><a href="http://example.com/">W</a></li>
    </ul>
</div>

<div id="contentHolder">
    <div id="content">
        <div id="contentSubA" class="subSection">
            <div class="subSectionHead">
                <ul class="nav">
                    <li><a href="http://example.com/">X</a></li>
                    <li><a href="http://example.com/">Y</a></li>
                    <li><a href="http://example.com/">Z</a></li>
                </ul>
            </div>
            <div class="subSectionContent">
                <h1>Yes</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie vel est a imperdiet. Praesent venenatis nisi non elit ultrices, ut suscipit felis consectetur. Praesent sed enim nec risus laoreet finibus non vitae erat. Donec eu malesuada felis, in mattis dolor. Morbi eget lacus cursus, congue orci ac, molestie metus. Phasellus ultricies, neque in aliquet feugiat, metus mi dapibus purus, at mollis eros nulla sit amet turpis. Morbi suscipit, tortor sit amet bibendum imperdiet, felis erat congue nunc, ut suscipit magna erat at turpis. Ut dictum ultricies ante. Praesent facilisis est sed justo malesuada vulputate. Nulla vitae enim ullamcorper, volutpat est ac, elementum massa. Sed et sapien rutrum, commodo nisl id, bibendum leo. Nam dignissim neque quis tristique tincidunt. Sed vestibulum mi ut tincidunt maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
            </div>
        </div>
        <div id="contentSubB" class="subSection">
            <div class="subSectionHead">
    ...

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
*{
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: inherit;
}
html, body{
    height: 100%;
}
body{
    font-family: sans-serif;
    text-decoration: none;
}

ul.nav{
    display: block;
    overflow: hidden;
    li{
        display: block;
        margin: 0 1px;
        float: left;
        a{
            display: block;
            height: 32px;
            padding: 8px;
            width: 64px;
            color: #fff;
            background-color: #333;
            text-align: center;
        }
    }   
}
#header, #footer{
    background-color: #999;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 10;
}
#header{
    height: 86px;
    top: 0;
}
#footer{
    bottom: 0;
    background-color: #999;
    ul.nav{
        float: right;
    }
}
#breadCrumbHolder{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 96px 8px 0 8px;
    ul.nav{
        float: left;
    }
}
#contentHolder{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 136px 8px 40px 8px;
    #content{
        position: relative;
        height: 100%;
        background-color: #ddd;
        padding: 8px 8px 8px 0;
        border-radius: 6px;
        .subSection{
            position: relative;
            padding: 0 0 0 8px;
            float: left;
            height: 100%;
            .subSectionHead{
                position: absolute;
                top: -48px;
                right: 0;
            }
            .subSectionContent{
                height: 100%;
                overflow: auto;
                padding: 16px;
                background-color: #fff;
                border-radius: 4px;
            }
        }
        #contentSubA{
            width: 60%;
        }
        #contentSubB{
            width: 40%;
        }

    }
}