Problem with slideshow css

Question

I want to leave the slide with the format of the image below.
I add the display:block in my slideshow images, but it doesn’t work!

HTML:
<div class="slideshow">
  <div class="slide">

    <div class="slide-1">
     <img src="img/01.jpg">
    </div>
    <div class="slide-2">
     <img src="img/img02.jpg">
    </div>
    <div class="slide-3">
     <img src="img/img02.jpg">
    </div>

  </div>
 </div> 

CSS:

.slideshow{
    width:100%;
    max-width:980px;
    height:auto;
    margin:0 auto;
}

.slide{
    width:100%;
    height:auto;
    display:block;
}

.slide-1{
    width:75%;
    height:505px;
    float:left;
}

.slide-2{
    width:50%;
    height:250px;
    float:right;
}

.slide-3{
    width:50%;
    height:250px;
    float:right;
}

Answer 1

Correct the slide percentage. 75% + 50% is 125%. Use float: left in all elements.

.slide-1{
    width:75%;
    height:505px;
    float:left;
}

.slide-2{
    width:25%;
    height:250px;
    float:left;
}

.slide-3{
    width:25%;
    height:250px;
    float:left;
}

» Jsfiddle