CSS Spacing Issue - css

Question

I have a large graphic that I am trying to pull up behind my content. Currently, instead of pulling up behind my content, the graphic is just placed below it, which leaves a big gap between the bottom of the content and the footer. The large graphic in reference is the watercolor bird at the bottom. The content is the resume text. Keep in mind that that resume text is an accordion link that expands. I need help closing up this space, please.
http://imip.rvadv.com/index3.html
CSS:
#bottom-graphic-container {
margin:0;
padding:0;
background:#fff url(../images/bg-bottom.jpg) bottom left no-repeat;
height:313px;
}
.wrapper{
max-width:920px;
margin:25px auto 0 auto;
padding:0;
width:100%;
z-index:1;
}
.st-accordion ul li.st-open > a{
/*margin-top:70px;*/
}
.st-open:last-child .st-content {
padding-bottom: 0;
}
.st-content{
padding: 5px 0px 100px 0px;
}
.st-content p {
font-size: 14px;
font-family: Georgia, serif;
font-style: normal;
line-height:22px;
padding: 0px 4px 15px 4px;
}
.st-accordion{
width:100%;
min-width:270px;
margin:0 auto;
}
.st-accordion ul li{
overflow: hidden;
padding:0 30px;
}
.st-accordion ul li:first-child{
overflow:visible;
list-style-type:none;
}
.st-accordion ul li:last-child{
}
.st-accordion ul li > a{
font-family: 'Trocchi', serif;
text-shadow: 1px 1px 1px #fff;
color:#688993;
line-height:44px;
font-size: 36px;
display: block;
text-decoration:none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color:#18232e;
}
HTML:
<div class="wrapper">
<!-- <div class="chirp">chirp</div>-->
<div id="st-accordion" class="st-accordion">
<ul>
<li>
Chirp. Would you like to know about me?<h2>Read the official birdwatcher's guide.</h2>
<div class="st-content"><p>content goes here</p>
</div>
</li>
<li>
A bird's eye view of my endeavors<h2>and other flights of fancy, also known as my portfolio.</h2>
<div class="st-content">
<p>Portfolio Goes Here.</p>
</div>
</li>
<li>
My migration pattern<h2> and other common facts, otherwise known as my resume.</h2>
<div class="st-content"><p>content goes here</p>
</ul>
</div>
</div>
</div>
<!--bottom graphics-->
<div id="bottom-graphic-container"></div>
<!--Footer-->
<div id="footer-container">
<div id="footer-content-container">
<div id="footer-copy">Tiffani Hollis, Creative Professional [phone] thollis#i-make-it-pretty.com</div>
<div id="signature"><img src="images/signature.png"></div>
</div>
</div>

Answer 1

I replicated your website locally and was able to fix this for you.
Reference: jsFiddle 1 (Note: Due to #font-face Same Domain Orgin Rules, those font's aren't shown.)
The solution was to change the HTML order for the Corner Bird so that this Div with ID name #bottom-graphic-container will contain the Accordion content (with class name .wrapper ).
Then, several modifications/configurations were done to the CSS to allow for proper operation. Notably, I set the Footer and the Corner Bird Div's to position:fixed; so it always clings to the bottom. When there's Link's or Resume Text behind the Footer, the expected browser scrollbar comes into play.
To clarify further: The Corner Bird is the "back-layer", the Accordion is the "middle-layer", and the Footer is the "front-layer". They all work in harmony now. :-D
Since the Corner Bird is now behind the Accordion div, that bg-background.jpg was clipping into the Header Image. The solution was to convert this image to PNG with Transparency. I used open source irfanview for that. I've included that PNG here as well, or you can make your own.
When all is said and done, your website will work as you expect it to. Tested in IE8, Firefox, and Chrome with no issues. (Side note: In IE8 I did not test #font-face fonts).
Here's a screenshot of your webpage with the browsers window adjusted to a small size:
The modified HTML:
<!--bottom graphics--><!-- Think of this as "bottom-back-layer" since various layers are at play here. -->
<div id="bottom-graphic-container">
<!--Footer-->
<div id="footer-container"><!-- Think of this as "bottom-front-layer". That said, back-layer and front-layer are also 'top' and 'bottom' too (nothing overlaps). -->
<div id="footer-content-container">
<div id="footer-copy">
<!-- Removed personal info -->
</div>
<div id="signature"><img src="images/signature.png"></div>
</div>
</div>
</div> <!--Closing tag for bottom graphics-->
The modified CSS:
.wrapper{
width: 920px;
max-width:920px;
margin: 0 auto;
padding: 0;
margin-bottom: 65px; /* Once the last item in Accordion menu is behind Footer, margin-bottom:65px; will provide Browser main scrollbar if hidden. */
position: relative; /* position:relative required with z-index below. (or absolute can be used with more CSS settings */
z-index: 1; /* A z-index of 1 is used since it's higher than '#bottom-graphic-container' (0 z-index) so Accordion Links are clickable */
}
#bottom-graphic-container {
width:100%;
height:313px;
background-image:url(../images/bg-bottomTrans.png); /* Use transparent PNG image. This CSS rule has color #fff removed as well. */
background-repeat: no-repeat;
position: fixed;
bottom: 94px; /* The height used here is the height of 'bg-footer.png' image. */
/* border: 1px solid red; */ /* Use for troubleshooting since image, even when transparent, may prevent interaction with content under it. */
}
#footer-container {
width:100%;
height:94px;
background-image:url(../images/bg-footer.png);
background-repeat: repeat-x;
position: fixed;
bottom:0;
z-index: 10; /* A z-index of 10 will allow the footer to cover the Accordion Links. */
}
#resume-container ul li{
list-style-type:disc;
list-style-position:inside;
line-height:20px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
padding-left:20px;
margin-right:80px;
} /* this closing '}' was missing */
The modified PNG with transparency background image file:
bg-bottomTrans.png
Final Update: As the above jsFiddle is one method to satisfy this Question, here is a complete different method at the request of the OP.
Reference: jsFiddle 2
The Bottom Graphic and Footer are part of the last Accordion item (Resume). Note moving up items that were at the bottom to be closer to top will create empty space at bottom of webpage for large monitors (To be sure, maximize your browser). To change the distance, adjust the CSS bottom property for the Bottom Graphic and Footer as noted in the CSS.
This is why the first method above has them fixed so no matter the browser height, uniform look is achieved. Note: Font-face has Same Domain Origin Policy rules, hence they don't render in jsFiddle.
To access the jsFiddle Edit Page, remove /show/ from Address Bar.
The HTML and CSS Panels is your code.
I've included comments in the CSS section and the HTML section changes include:
1. Div id="masthead-container" now contains the other items.
2. The other items are: class="wrapper", id="bottom-graphic-container" and id="footer-container
3. When viewing the HTML in the jsFiddle, the RED tags seen are due to previous markup errors. Once your webpage is composed, visit W3C Online Validation to see where the error occurs. Example: you have an unclosed or extra div tag that shouldn't be there.

Answer 2

I see two possible modification to improve the visual/remove the space:
Change the wrapper class to remove the bottom margin:
.wrapper {
margin: 25px auto -50px;
max-width: 920px;
padding: 0;
width: 100%;
z-index: 1;
}
The line that's changed is the margin one. I put -50px at the bottom margin. You can play with that value (make it lower or higher) to change the space between your wrapper and the footer.
You might want to add a rule to the last accordion child as well. Because he doesn't need the extra bottom padding that separate him from its siblings.
.st-open:last-child .st-content {
padding-bottom: 0;
}
This one target the .st-content div that have .st-open as parent , but only if the block with the .st-parent is the last-child of its parent. Hence, it works only for the bottom part of your accordion, setting a bottom padding of 0 instead of 100px.