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"> </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>