I have the following CSS manipulating nested DIVs.  It's essentially a horizontal table surrounded by navigation options with the slideshow in the middle.  When I load this up, the slideshow appears outside the intended "cell", apparently attached to the upper-left corner of the browser.  How do I wrestle this back into the desired "cell"?

 

TIA,

Perry

 

<---snip---->

#content_gallery {
 width: 700px;
 height: 420px;
 margin-left: 10px;
 margin-top: 80px;
 background-color: #62623C;
}
.container {
 display:inline-table;
 margin:50px 50px 50px 50px;
 border:5px white solid;
 font-size:70%;
}
.row {
 display:table-row;
 vertical-align:text-top;
}
.detail{
 display:table-cell;
 width:115px;
 font-style:italic;
 background-color:black;
 color:white;
 border-right: 1px white solid;
}
.next{
 display:table-cell;
 width:25px;
 background-color:black;
 color:#60513A;
 border-right: 1px white solid;
}
.slideshow{
 display:table-cell;
 width:300px;
 height:300px;
 background-color:black;
 color:white;
 border-right: 1px white solid;
 vertical-align:bottom;
}

.slideshow img {
 padding: 20px;
 margin: auto;
 display:block;
}

.back{
 display:table-cell;
 width:25px;
 background-color:black;
 color:#60513A;
 border-right: 1px white solid;
}
.portfolio{
 display:table-cell;
 width:25px;
 border-right: 1px white solid;
 background-color:#80583F;

}
.gallery{
 display:table-cell;
 width:25px;
 border-right: 1px white solid;
 background-color:#62623C;

}

.news{
 display:table-cell;
 width:25px;
 background-color:#655558;

}