Search code examples
htmlcsspositionfixed

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>
Solution

  • You need to move the tops of the elements below the header, in your code pen you can do this by adding:

    top: 150px;
position: relative;

    to the style of the other elements. I would personally prefer to wrap the two floated divs in another div as a container and set top on that, but it isn't really necessary.

    See here: http://codepen.io/anon/pen/dPQqGb