SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning a div at the bottom of a td independant of the rest of the TD's content

    I have a situation that has me stumped.


    In a TD, i have some content, the first portion of the content I want aligned to the top of the td, but the final DIV tag I want to always position at the very bottom of the TD.

    This way, if the content above, across 3 table cells in a row, are different lengths, my price div at the bottoms are always aligned..

    any ideas?

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find it tricky to position things in a table, but I think something like this should work the way you want, the positioning is commented:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    .products {
    	float: left; /* to shrink-wrap the table */
    	position: relative; /* cross-browser consistent reference can only be placed outside the table element */
    	margin-bottom: -1px ; /* bottom margin to collapse the next table border touching, simulating next row */
    	border: solid #000;
    	border-width: 1px 0 1px 0;
    }
    .products table{
    	table-layout: auto; /* table width is shared by the columns according to cell content, table expands by no-break content */
    	table-layout: fixed; /* table width is equally shared by the columns, clips no-break content */
    	border-collapse: collapse;
    	width: 600px;
    }
    .products td{
    	border: solid #000;
    	border-width: 0 1px 0 1px;
    	padding: 5px 5px 2em;
    	vertical-align: top;
    	text-align: left;
    }
    .products .price{
    	position: absolute;
    	bottom: 5px; /* bottom refers to positioned ancestor bottom, here the table bottom */
    	left: auto; /* auto position is calculated by browser, usually the same as the in flow position */
    	margin-left: 0; /* optional, use margin to control left position according to the given position */
    }
    </style></head><body>
     
    <div class="products">
    	<table>
    		<tr>
    			<td><div>Content is wrapped in a block-container to get a line break after, witch is needed for a consistent left:auto on the price container.</div><div class="price">Price</div></td>
    			<td><div>Content Content Content Content Content Content</div><div class="price">Price</div></td>
    			<td><div>Content Content Content</div><div class="price">Price</div></td>
    			<td><div>Content</div><div class="price">Price</div></td>
    		</tr>
    	</table>
    </div>
     
    <div class="products">
    	<table>
    		<tr>
    			<td><div>Content</div><div class="price">Price</div></td>
    			<td><div>Content Content Content Content Content Content</div><div class="price">Price</div></td>
    			<td><div>Content Content Content</div><div class="price">Price</div></td>
    			<td><div>Content</div><div class="price">Price</div></td>
    		</tr>
    	</table>
    </div>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey ill try that thanks!

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and just for more illustration,

    this page , check the last row of 3 up products and you will notice that the first products LINK TEXT was too long, wrapped and places the price of the next two columns out of whack.. this is why im trying to find an answer to this issue.. cause i like things to be tidy.. :P --> http://www.ttechnologyinc.com/norstar.asp

  5. #5
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a link button inside a table cell. All I did was set the position of the cell to relative and then styled the link button to position:absolute; bottom: 5px; and it put all the other stuff in the cell at the top and the link button at the bottom. Worked great.
    Looked like this:
    <asp:TableCell ID="tblDay0" runat="server" style="position:relative;" >
    <asp:LinkButton style="position:absolute; bottom:5px;" Text="Add" ID="lbtnAdd1" runat="server"></asp:LinkButton>
    </asp:TableCell>

    Worked great! Should work for you as well.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Hi, this thread is almost 2 years old, I don't know how you fond htis thread (probably google) but you should look at the last post and realize that this thread is long dead.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is the beauty of the internet. Yes it is old... but the website that was posted still doesn't have the text aligned like he wanted and it is still a good question. The fact that I found it and that you also found it is a testament to the fact that information doesn't die with time. ... There is always someone learning.... which begs the question. What was the point of your post? Because a post is only finished when it is answered.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    That and if this thread shows up well on Google, people are currently finding it, so if a better answer comes along, it can still be valuable.

    I tend not to answer very old threads myself... however if the "answer" received is incorrect or will cause some problem the OP might not notice until later, I'll add my reply too.

    Why I'm generally not in favour of locking "solved" threads, let alone old ones (even though I understand spammers tend to post on old threads).

    That said, not all browsers will let you relatively position a table cell and then absolutely position the children inside. Firefox, I'm looking at you : ( This is why ErikJ has all those divs in there. Divs, not being table elements, can usually get around the problem of positioning with table elements.

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mudpuppy98, Welcome to SitePoint!

    Thanks for sharing your solution, though as Stomme poes stated, it is not reliable crossbrowser.

    Quote Originally Posted by Mudpuppy98 View Post
    ... but the website that was posted still doesn't have the text aligned like he wanted and it is still a good question. ...
    Yes, and the question is still answered.

    The solution I posted would work very well, but the site OP linked to doesn't use the solution.
    Happy ADD/ADHD with Asperger's


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
  •