Search code examples
javascriptheightmarginfixed

I want to place a div below a fixed image with auto height

Maybe I'm not using the right keywords while searching, but I can't find a solution to my problem.

Here it is:

I have a fixed top banner image using 100% width and auto height. I would like to add my navigation and content right below it. The tricky thing is that I want the navigation and content to scroll over the image from below, while the image stays fixed on top of the page.

Is there a way to determine the height of the image (which will be relative to someone's screen size) and automatically use this as margin-top for the navigation div? That would theoretically fix my problem.

edit; upon solving the initial problem, another one occurred. The #nav div now seems to think that the bottom of the #banner-image is the top of the screen. What could this be?

Any other ideas are welcome!

Here's my code:

HTML

<img src="images/banner.jpg" id="banner" />

<div id="nav" >
    [...]
</div>

CSS

#banner {
    position: fixed;
    top: 0;
    width: 100%;
    height: auto;
}    

#nav    {
    background-color: #261E03;
    width: 100%;
}
Solution

  • You can`t do that via CSS... You can try using Jquery:

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function(){
        $("#nav").css({
            "padding-top" : $("#banner").height()
        });
    });
</script>