I have created an image slider but it appears in the middle of the page. I want to move it nearer to the right but I am having problems with positioning the slider.

The css code for the postioning is;
Code:
#slideshow { 
    margin: 50px auto; 
    position: relative;
    width: 465px;
    height: 250px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div {
    position: absolute;
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
slideshow img.align-right: {float: right;
                             Margin-right: 20px;
}
There is another issue which is that the following div (menu) appears a long way below the slider.
If I alter the height in slideshow the menu moves higher up the page but the slider background collapses. How can I resolve this?
Code:
#slideshow { 
    margin: 50px auto; 
    position: relative;
    width: 465px;
/* it seems that this line places the menu div 250px below the images. If I delete this line the background box collapses and the menu appears in the right place */ 
   padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div {
    position: absolute;
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
slideshow img.align-right: {float: right;
                             Margin-right: 20px;