Position: relative-absolute?

HTML & CSS
1

In the markup below, purely via css, I want to pull the .box.s4 element out of its normal flow and position it so that its always 20 pixels from the bottom most element within the markup. (I can’t change the markup)

I’ve tried absolute positioning with a negative bottom margin. It works, but it does not have any regards for the last element in the markup. For example, when the “copyright” div is not present in the markup, the box.s4 element’s position remains unchanged. I’d like it to always be 20px below the last element.

I doubt its possible, but I figure that if it is, this is the place to find out.

<div class="wrapper">
	<div class="main">
		<div class="pre-footer">
			<div class="box s1">
				<h4>Box 1 Title</h4>
				<div class="textwidget">This is box 1 content.</div>
			</div>
			<div class="box s2">
				<h4>Box 2 Title</h4>
				<div class="textwidget">This is box 2 content.</div>
			</div>
			<div class="box s3">
				<h4>Box 3 Title</h4>
				<div class="textwidget">This is box 3 content.</div>
			</div>
			<div class="box s4">
				<h4>Follow Us</h4>
				<div class="textwidget">
					<ul class="social"> 
						<li class="twitter"><a href="http://twitter.com" /></a></li> 
						<li class="facebook"><a href="http://facebook.com" /></a></li> 
						<li class="youtube"><a href="http://youtube.com" /></a></li> 
						<li class="linkedin"><a href="http://linkedin.com" /></a></li>
						<li class="yahoo"><a href="http://yahoo.com" /></a></li>
						<li class="flickr"><a href="http://flickr.com" /></a></li>
						<li class="vimeo"><a href="http://vimeo.com" /></a></li>
						<li class="blogger"><a href="http://blogger.com" /></a></li>
						<li class="stumbleupon"><a href="http://stumbleupon.com" /></a></li>
						<li class="rss"><a href="/feed" /></a></li>
					</ul>
				</div>
			</div>
			<div class="clear">&nbsp;</div>
		</div>
	</div>
	<div class="footer">
		<div class="menu">Menu goes here</div>
		<div class="copyright">Copyright notice goes here</div>
	</div>
	<!--I Would Like to have box.s4 here, shrink  wrapped 20 pixels below the copyright notice (or the last element in the footer div-->
</div>
2

yes, by it very definition AP elements are positioned ( and sized) in relation to their closet RP parent. Since they are outside the flow they would not be “concerned” with their sibling elements…

if it doesn’t break the semantics, I would suggest making that last element a child of the next to last… OR PERHAPS …

WRAPPING .s3 and .s4 in a <DIV class=‘s3n4’> treating .s3n4 like you originally treated .s1, .s2, as far as layout an positioning… now .s3 can be static .s3n4 relative and .s4 absolute.

3

You might have to go down the JavaScript rabbithole for that kind of positioning.