absolutely positioned section is messing with the rest of web page - height

Question

I am designing a slideshow and the absolutely positioned ul of images. The absolutely positioned ul is screwing with the natural flow of the rest of the page. I know absolutely positioned elements do this. However, I was under the impression that setting the #sliding section to position: static and having height: auto !important would work. The #stuff section is showing up underneath the #sliding section. Has anybody else had to work with this before?
To be perfectly clear the actual slideshow works perfectly, but the HTML and CSS is what I am trying to solve. Any help is very appreciated.
Here is the HTML
<section id="sliding">
<img id="leftimg" src="prev.png" alt="left">
<ul class="boxslider">
<li><img class="slidingimg" src=".jpg" id="will" alt="1"></li><!-- will -->
<li><img class="slidingimg" src=".jpg" id="poa" alt="2"></li><!-- powerofattorney -->
<li><img class="slidingimg" src=".jpg" id="probate" alt="3"></li><!-- probate -->
<li><img class="slidingimg" src=".jpg" id="forming" alt="4"></li><!-- forming business -->
<li><img class="slidingimg" src=".jpg" id="contracts" alt="5"></li><!-- -->
<li><img class="slidingimg" src=".jpg" id="realestate" alt="6"></li><!-- -->
</ul>
<img id="rightimg" src="next.png" alt="right">
</section>
<section id="stuff">
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
</section>
Here is the CSS
#sliding{
position: static;
display: block;
width: 100vw;
height: auto !important;
clear: both;
}
#leftimg, #rightimg{
display: inline-block;
position: absolute;
top: 40%;
width: 50px;
z-index: 1;
}
#leftimg{
left: 1vw;
}
#rightimg{
right: 1vw;
}
.boxslider{
position: absolute;
left: 0px;
display: block;
width: 600vw;
overflow: none;
}
.slidingimg{
display: inline-block;
vertical-align: top;
width: 100vw;
height: auto;
float: left;
}
#stuff{
width: 100vw;
height: 80vh;
border-top: 8px solid green;
clear: both;
}
Here is the jsfiddle.
http://jsfiddle.net/2ruk3Lju/2/

Answer 1

I guess you cannot use position:absolute. Position absolute has to have the height and width explicitly assigned. I decided to try position relative since it can still be moved by jquery to create a sliding effect. This works because position:relative is still within the normal flow of the document and fixes the issue of the content below the #sliding div stacking underneath it.