I have an imageslider with some images which show in responsive mode. Below that I want to make a nav bar.

```
< script type = "text/javascript" > $(document).ready(function () {
    $("#slideshow img:gt(0)").hide();
    setInterval(function () {
        $('#slideshow > img:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
    }, 4000);
});
< /script>
<body style="background-color: #F2F2F2;">
    <div style="background-color: black;">hallo</div>
    <br/>
    <div id="slideshow" style="margin: auto;width: 90%;" class="cf">
        <img class="logo" src="images/logo1.png" />
        <img class="logo" src="images/logo_2.png" />
        <img class="logo" src="images/logo_s2.png" />
    </div>
    <br/>
    <div id="menu" style="background-color: black;">hallo</div>
</body>

```

**CSS**

```
.logo {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

#slideshow img {
position: absolute;
}

#slideshow {
position: relative;
}

```

Problem is that the menu div does not want to go below the slideshow. it just hangs halfway down the slideshow. The images within the slideshow are positioned absolute.

I tried to apply the following clearfix but it doesn't work.

**More CSS**

```
.logo:after {
clear: both;
}

.cf:after {
clear: both;
}

```

How can I position this div so that it always sticks below it.

ps I am not a CSS wizard so please take that into account before downvoting. I tried 3 hours before I posted this question.