Remove space before slideshow

Problem

I have slideshow and aside content in html.

I want to remove the space below the slideshow so that the aside content will be just near the end of the slideshow.

I dont know how to remove the space.

If I give margin, slideshow gets disturbed. What should I need to add ?

Here is the http://jsfiddle.net/F9c6S/3/

How can i do this ?

<div class="skdslider">
    <ul id="demo1" class="slides">
<li>
<img src="slides/1.jpg" />
<!--Slider Description example-->
 <div class="slide-desc">
        <h2>Slider Title 1</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
<li><img src="slides/2.jpg" />
   <div class="slide-desc">
        <h2>Slider Title 2</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
<li><img src="slides/3.jpeg" />
<!--NO Description Here-->
</li>
<li><img src="slides/4.jpg" />
  <div class="slide-desc">
        <h2>Slider Title 4</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
<li><img src="slides/5.jpg" /></li>
<li><img src="slides/6.jpg" />
  <div class="slide-desc">
        <h2>Slider Title 6</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
</ul>
</div>

<aside class="top-sidebar">

        <article>
            <h2>DEMO</h2>
            <p><li>DEMO</li>
            <li>DEMO</li>
            <li>DEMO</li>
            <li>DEMO</li></p>
        </article>
    </aside>

    <aside class="top-sidebar">
        <article>
            <h2>DEMO</h2>
            <p>
            <li>DEMO</li>
            <li>IDEMO</li>
            <li>DEMO</li>
            <li>DEMO</li></p>
        </article>
    </aside>

    <aside class="top-sidebar">
        <article>
            <h2>DEMO</h2>
            <p><li>DEMO</li>
            <li>DEMO</li>
            <li>DEMO</li>

</p>
        </article>
    </aside>
Problem courtesy of: ləːnə

Solution

You need to remove padding for

.skdslider:after {
    content: '';
    /* padding-top: 50%; */ 
    display: block;
}

And give min-height to

.skdslider{
 width:100%;
 position: relative;
 display: block;
 overflow:hidden;
 min-height: 558px; /**For have space for slider**/
}

Here is the demo

Solution courtesy of: Tushar

Discussion

You can add a max-height to the skdslider style: JSFiddle this should remove that extra white space.

.skdslider
{
     width:100%;
     position: relative;
     display: block;
     overflow:hidden;
    max-height: 403px;
}
Discussion courtesy of: Howli

The gap between the bottom of the slider and your aside element is caused by the top margin on the h2 element contained within your aside element. To fix this, you can simply:

aside h2 {
    margin-top: 0;
}

The large gap at the bottom of your slider is caused by this styling:

.skdslider:after {
    ...
    padding-top: 50%;
}

To fix that, remove that padding-top completely, and add:

.skdslider {
    height: ...;
}

You'll have to determine how high you want your slider to be, so replace that ... with whatever you desire.

JSFiddle demo.

Discussion courtesy of: James Donnelly

This recipe can be found in it's original form on Stack Over Flow.