title: Placing text and slideshow side-by-side in a box
body: <p>I'm trying to place a slideshow side-by-side of text, with the slideshow to the right, and contain it all within a box.  I thought I got it right at first, by simply containing it in a table with text in one column and the slideshow in the other, but as soon as I finished coding the slideshow, it refuses to stay within the parameters of the box - I've tried using section, aside, article, or the basic div elements as well and I just can't get it to work.</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;table class="main"&gt;
  &lt;tr&gt;
  &lt;th&gt;
  ...random text here...
  &lt;/th&gt;
  &lt;td&gt;
  
  &lt;div class="slideshow"&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/1.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/2.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/3.gif" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/4.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/5.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/6.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/7.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/8.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/9.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/10.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/11.png" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/12.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/13.jpg" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="Pics/slide show/14.png" style="width:500px;height:500px;" /&gt;
  &lt;/figure&gt;
  &lt;/div&gt;
  
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is my css:</p>
  
  <pre><code>table.main {
  background-color:#fff;
  margin:20px;
  padding:20px;
  border:5px solid black;
  text-align:center;
  font-family:"Fredericka the Great";
  display:div;
  }
  
  table.main th, td {
  padding:20px;
  margin:20px;
  }
  
  table.main th {
  padding:40px;
  margin:50px;
  font-size:25px;
  }
  .slideshow{
  position:relative;
  max-width:500px;
  height:500px;
  }
  .slideshow figure{
  margin:0;
  position:absolute;
  opacity:0;
  }
  figure:nth-child(1){
  animation: xfade 42s 39s infinite;
  }
  figure:nth-child(2){
  animation: xfade 78s 72s infinite;
  }
  figure:nth-child(3){
  animation: xfade 78s 66s infinite;
  }
  figure:nth-child(4){
  animation: xfade 78s 60s infinite;
  }
  figure:nth-child(5){
  animation: xfade 78s 54s infinite;
  }
  figure:nth-child(6){
  animation: xfade 78s 48s infinite;
  }
  figure:nth-child(7){
  animation: xfade 78s 42s infinite;
  }
  figure:nth-child(8){
  animation: xfade 78s 36s infinite;
  }
  figure:nth-child(9){
  animation: xfade 78s 30s infinite;
  }
  figure:nth-child(10){
  animation: xfade 78s 24s infinite;
  }
  figure:nth-child(11){
  animation: xfade 78s 18s infinite;
  }
  figure:nth-child(12){
  animation: xfade 78s 12s infinite;
  }
  figure:nth-child(13){
  animation: xfade 78s 6s infinite;
  }
  figure:nth-child(14){
  animation: xfade 78s 0s infinite;
  }
  @keyframes xfade{
  0%{
      opacity:1;
  }
  4.5%{
      opacity:1;
  }
  7.15%{
      opacity:0;
  }
  95%{
      opacity:0;
  }
  100%{
      opacity:1;
  }
  }
  </code></pre>