Blog post + fixed hidden comments

by meetaaronsilber

HTML

<div class="container">
<nav id="navigation">
    <ul>
        <li>Blog</li>
        <li>Work</li>
        <li>About</li>
        <li>Email</li>
    </ul>
</nav>

<article>
    <section id="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare purus eget dolor tempus tincidunt. Nulla facilisi. Vivamus at vehicula elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris condimentum venenatis sodales. Curabitur ac ligula sit amet mi egestas aliquet at non enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis magna diam, fermentum vitae facilisis sed, ultricies quis risus. Vivamus vel varius ipsum. Nam laoreet fermentum libero eu ultrices. Nulla lacinia posuere neque ut sodales. Pellentesque arcu purus, condimentum ut mattis id, interdum ac mauris. Nulla vitae tincidunt libero.
</p>
<p>
Morbi erat nisl, convallis at tempus sit amet, ullamcorper eget elit. Vivamus sit amet dui ipsum, nec pretium ante. Quisque nisi magna, adipiscing at facilisis sed, eleifend in libero. Curabitur nibh tortor, bibendum quis elementum sed, viverra eu sem. Vestibulum consectetur ultrices iaculis. Integer eros justo, pretium ut adipiscing sit amet, egestas sed leo. Mauris sollicitudin mi in magna feugiat in posuere eros dignissim. Mauris orci massa, bibendum et viverra quis, iaculis vitae lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas adipiscing rutrum mauris nec ultrices. Sed sed leo lectus.
</p>
<p>
Integer feugiat suscipit ante eu faucibus. Vivamus in nisi dapibus enim viverra suscipit. Morbi ornare hendrerit sem, ornare dignissim dui ullamcorper a. Donec ut blandit augue. Fusce sagittis lectus non felis semper eu adipiscing sem imperdiet. Quisque suscipit malesuada lacinia. In at nunc quis tellus vehicula fringilla a sed tellus. Fusce...

CSS

.container { position: relative; width: 100%; }

#navigation { 
    position: fixed; 
    top:0;
    left:0;
    width: 30%;
    height: 100%;
    background: #252525;
}

article {
    position: relative;
    float: right;
    width: 70%;
}

#main-content {
    position: relative;
    z-index: 1;
    margin-bottom: 500px;
    background: #d5d5d5;
}

#comments {
    position: fixed;
    z-index: 0;
    bottom: 0;
    width: 100%;
    height: 500px;
    
    background: rgba(0,0,255,0.20);
}