Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Vertical align to bottom of floating div

    Referencing the attached image, any ideas about how to achieve this layout using floats (rather than tables)?

    The part that's giving me trouble is the bottom-left set of links, that should be aligned to the bottom of the container. Also, the width of the container is not fixed - it shouldn't have width specified at all, and expand to fit it's contents.

    I'm not worried at all about fonts, borders, padding, colors, etc, just trying to achieve the attached macro concept using CSS, best-practices and w/out tables.



    This layout is easily achieved using tables; the following markup (using tables) will render and behave as described - regardless of the size of the links, the size of the image, or the length of the description, but obviously I'd like to know how to do this with best practices of floating divs.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" > 
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="robots" content="noindex, nofollow" />
    	<title>Title</title>
    	
    	<style type="text/css">
    		td {
    			vertical-align : top;
    		}
    		td.links {
    			text-align : right;
    		}
    		td.links.bottom {
    			vertical-align : bottom;
    		}
    		td.description {
    			width : 150px;
    		}
    	</style>
    	
    </head>
    
    <body>
    
    <table>
    
    	<tr>
    		<td class="links">
    			<a href="#">Link</a>
    			<br />
    			<a href="#">Another Link</a>
    		</td>
    		<td rowspan="2">
    			<img src="http://static.howstuffworks.com/gif/code-breakers-1.jpg" />
    		</td>
    		<td class="description" rowspan="2">
    			<h1>Title</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    		</td>
    	</tr>
    
    	<tr>
    		<td class="bottom links">
    			<a href="#">Link</a>
    			<br />
    			<a href="#">Another Link</a>
    		</td>
    	</tr>
    
    </table>
    
    </body>
    </html>
    TYIA for any suggestions.

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    If i was of any help, dont forget to click the 'thank' button =]

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks for the link - unfortunately, that doesn't address the issue of a floated element not expanding to the height of it's parent, which is necessary to use the bottom : 0px technique :/

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Haven't looked at the link, but with your html something like:

    Code:
    <div id="wrap">
    <div id="extra">Links here</div>
        <div id="left">Left</div>
          <div id="middle">Middle</div>
          <div id="right">Right</div>
    
    </div>
    then you can use absolute positioining to place the extra text always at the bottom left of #wrap. In this example all the columns are floated so we need to clear the float at the end of #wrap using overflow:auto.

    Code:
    #wrap{width:300px;background-color:lightgrey;overflow:auto;position:relative}
    #left{float:left;width:98px;border:1px solid red}
    #middle{float:left;width:98px;border:1px solid blue;height:300px}
    #right{float:left;width:98px;border:1px solid green}
    #extra{position:absolute;bottom:5px;left:5px}

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    awesome - thanks a ton. i also appreciate the "just what's necessary" example - very helpful in understanding the concept.
    Last edited by big-momo; 08-20-2010 at 11:40 AM. Reason: typo

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You're welcome. Just to add a clarification - the above assumes that the content in #left is always shorter than that in either #middle or #right.

    It looks like that's the case - but if not, or as a precaution you could add some padding-bottom to #left to allow space for #extra .


  •  

    Posting Permissions

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