SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position: relative-absolute?

    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.

    HTML Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You might have to go down the JavaScript rabbithole for that kind of positioning.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •