Results 1 to 2 of 2

Thread: Align images to cell corners using CSS

  1. #1
    Join Date
    Aug 2006
    Posts
    28

    Align images to cell corners using CSS

    Im trying to make 4 images align to the 4 corners of a table cell by adding styles to each image. how can i do this with CSS?

    Ive played around with:

    img tr.Topleft {
    left:0px; top: 0px; position: absolute;
    float: left;

    Am i close?

    Kinds regards,
    Fiasst

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    Another method would be to put a table inside the first table cell.
    Put in the ...<td>
    <table><tr><td>image 1</td><td>image 2</td>
    </tr><tr>
    <td>image 3</td><td>image 4</td>
    </tr></table>
    </td>...rest of table.
    Make the second table have no cellspacing, cellpadding and no borders if it makes it look better.
    You may also have to use valign="top" or "bottom" and align="right" to get them right into the corners.
    ------------------------
    Using pure css you will need something like this:-
    <table><tr><td>

    <div style="width:?px;"> <!--total of width of left and right images (max of two rows)-->
    <img style="float: left" src="image-top-left.jpg">
    <img style="float: right" src="image-top-right.jpg">
    <div style="clear: both; line-height:0; font-size:0;">divider div</div>
    <img style="float: left" src="image-bottom-left.jpg">
    <img style="float: right; margin-top:101px;" src="image-bottom-right.jpg">
    </div>

    </td>
    <td>Right cell text</td>
    </tr><tr>
    <td>lower table cell left</td>
    <td>lower table cell right</td>
    </tr></table>

    Add style="margin-top:?px;" to each image depending on whether it is higher or lower than its neighbour. In my example the bottom right image is 101px less high than its left neighbour so it needs the margin-top to put it in the right bottom corner.
    Last edited by Wickham; 09 Aug 2006 at 07:12 AM.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

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