I have a slideshow and aside content in HTML.
My goal is to eliminate the space below the slideshow so that the aside content can be positioned right next to the end of the slideshow.
Unfortunately, I am unsure how to remove this space without disrupting the slideshow when adding margin values. What should I do differently?
You can view the current setup here
Is there a specific solution for achieving this layout adjustment?
<div class="skdslider">
<ul id="demo1" class="slides">
<li>
<img src="slides/1.jpg" />
<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>
...
// Slide data continues
</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>
// More aside content follows