fixed left flexi right

by Jason Rose

HTML

<div id="container">
    <div id="side">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue sollicitudin sit amet. Nulla facilisi. Nulla quis dictum sem. Sed eget ante purus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo varius felis, vitae tempor augue...

CSS

body, html {
    height: 100%;
    width: 100%;
}
#container {
    width:100%;
    height:100%;
    background: yellow;
}
#side {
    width:310px;
    float:left;
    background:#aeaeae;
    position: fixed;
    height: 100%;
    padding-top: 20px;
    padding-left: 20px;
    margin-right: 20px;
}
#main {
    width:800px;
    height: 100%;
    float:left;
    background: cyan;
    margin-top: 20px;
    margin-left: 350px;
    margin-right: 20px;
}