SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Position an img at bottom of a table cell.

    I've got 6 small images one in each of 6 cells of a 3x2 table that is also referencing a popup thumbnail. All's I want to do is position each image in the lower right corner of each cell with appropriate padding.

    Can anyone help?

    develop.pariscut.com/services-2

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Are teh images allowed to overlap anything? Other content? Will there be anything "in the same line" as the image?

    If nothing can overlap (and you need it to wrap around stuff), you're basically looking for a float:bottom. Impossible. Design a different way to get what you want .

    If there is "nothing in the same line as the image", then you can just wrap a div around everything (in the <td>, which I don't see why you are using tables in the first place...), give that <div> some bottom padding, equal to the image. Give it position:relative as well, and then set an <img> in the HTML with that image. Position absolute it at the bottom of the cell.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ryan said you can't really do this in a table cell as you can't absolutely position something relative to a table-cell. Your table option would be to create a new row just for the thumbnails and they they would all align.

    In a css layout you could position the elements to the bottom and preserve the space with padding on the element above.

    For ie8+ you could use display:table-cell and do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
    	position:relative;
    	width:50%;
    	float:left;
    	border:1px solid #000;
    	overflow:hidden;
    }
    .box {
    	width:33%;
    	border:1px solid #000;
    	background:red;
    	display:table-cell;
    	padding-bottom:60px;
    }
    * html .box{float:left;width:32%}
    *+html .box{float:left;width:32%}
    .thumbnail {
    	clear:both;
    	float:right;
    	width:50px;
    	margin:0 3px 0 0;
    }
    p.thumbnail a {
    	width:50px;
    	height:50px;
    	display:block;
    	background:blue;
    	text-align:center;
    	line-height:50px;
    	position:absolute;
    	bottom:0;
    	border:1px solid #fff;
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="box">
    				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
    				<p class="thumbnail"><a href="#">test</a></p>
    		</div>
    		<div class="box">
    				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
    				<p class="thumbnail"><a href="#">test</a></p>
    				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
    		</div>
    		<div class="box">
    				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
    				<p class="thumbnail"><a href="#">test</a></p>
    		</div>
    </div>
    </body>
    </html>


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
  •