What follows is a long explanation, but it's the only way to effectively communicate the issue I'm trying to resolve...
I am (somewhat desperately, and entirely unsuccessfully) trying to overlay divs without the use of absolute positioning. The need stems from a paypal cart that I place on the site via a Javascript. The cart's natural position is hard against the top margin of the webpage (not its containing div, which is #wpPayPal, or the wrapper for this div, #main).
The script's author strongly recommends against customizing the cart's stylesheet, but I found a tutorial he wrote that enables insertion of the cart into a placeholder div, with positioning instructions for the container that works - I was able to position the cart below the site's top banner section. However...
The cart's HTML form and a ul element within each have height requirements in the cart's stylesheet, and this pushes the page's main content, wrapped by the container div #imageWrapper, too far down the page to be acceptable.
I tried to position #imageWrapper over #main with several ideas gathered from posts on this site with no success. I've tried absolute positioning on #imageWrapper, but this frees the footer to float beneath. #imageWrapper's height is variable, hence I do not want to hold the footer in place with height, since the min-height to prevent overlap would push the footer down too far for much of the site's content.
I also tried pulling position:relative from the cart form's CSS, but the cart immediately floats back to the top of the webpage. Margin, top-margin, etc.,do not remedy this.
I then read an article on using position:relative and z-index to overlay divs. Tried this, too, first by putting z-index: -1 on #main (the div that wraps the paypal cart), but the cart disappears. Not sure where it goes, either, since the site's breadcrumb nav, also wrapped by #main, stayed put.
I then set the z-index for main to 0 and applied position:relative to #imageWrapper with z-index:100. The cart reappeared but still holds #imageWrapper down.
Suggestions are greatly welcomed. I'm not an interface person by any stretch of the imagination, just a guy who knows how to use Google, so thanks in advance for clearly articulating your resolution :) Also, FYI, presently I have the min-height requirement for the cart form set to 0, and set the UL element within to height:auto. With only a single item in the cart, this allows #imageWrapper to move up the page enough to be acceptable, but this is not a viable long-term solution.
Here's an example page - to see the cart, add an item using the dropdown that appears below the main image. In its expanded state, you'll see how #imageWrapper sits against it.
I've included portions of the offending HTML / CSS below:
<div id="main">
<div id="wpPayPal">
</div><!--end wpPayPal-->
<div id="breadcrumbs">
<span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/">home</a></span> »</span></span>
</div> <!--end breadcrumbs -->
</div><!-- end Main -->
<div id="imageWrapper">
<div id="imageInnerWrapper">
<div id="featureImage">
<div class="filename"><h1>~ Bryce Canyon Sunrise | Bryce Canyon | Utah ~</h1>
</div><!--end filename-->
etc...
#main {
display: inline;
position: relative;
z-index: 0;
}
#imageWrapper {
clear: both;
width: 840px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 100;
}
#imageInnerWrapper {
width: 840px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 100;
}
#featureImage {
width: 840px;
margin: 0 auto;
padding: 0;
}
#wpPayPal {
overflow: hidden;
float: right;
margin-right: 100px;
min-width: 365px;
min-height: 20px;
}
/* Override the default Mini Cart styles */
#wpBody #PPMiniCart form {
position: relative;
right: auto;
width: auto;
min-height: 0;
}
#wpBody #PPMiniCart form ul {
height: auto;
}