CSS header image div

Question

I want to use divs in my page. A header to images in to top, and after it a menu div. I set the fourth div with images, and its working. But when i set the second div, its in the firts div. How i can solve this problem?

     <div id="slideshow">
    <div>
        <img src="http://img2.wikia.nocookie.net/__cb20100409185740/gtawiki/images/e/e7/Fort_carsonn.jpg" width="1200" height="300" />
    </div>
    <div>
        <img src="http://i12.photobucket.com/albums/a230/buetforasif/FortCarson_ataglance.jpg" width="1200" height="300" />
    </div>
 </div>
 <div id="menu" class="div_menu">

 </div>

#slideshow { 
width: 1200px;
height: 300px;
position: absolute;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px; 
}

div.div_menu {
background-color: #F5F5F5;
width: 1200px;
height: 50px;

position: fixed;
left: 0;
right: 0;
margin: auto;
}

Script:

<script>
    $(function() {

        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
        },  4000);

    });
</script>

Answer 1

Your problem is because of position: absolute; in #slideshow, so edit your CSS and try this:

#slideshow {
    width: 1200px;
    height: 300px;
    position: relative;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

Or if you want to keep position: absolute for some reason, add margin-top to .div_menu, and try this:

div.div_menu {
    background-color: #F5F5F5;
    width: 1200px;
    height: 50px;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 300px; /* Same as the height of #slideshow */
}

Hope this will help you ..