Remove space before slideshow

Question

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>

Answer 1

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

Answer 2

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.

Answer 3

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;
}