'Fixed div hides other divs under it

How do you keep the div fixed and other div on the next "line" but not under it when the page first loads. http://codepen.io/alexdj1983/pen/raQrEK

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
    <div id="header"><h1></h1></div>
    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>
    </body>
</html>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source