PDA

View Full Version : Align images to cell corners using CSS



Fiasst
08 Aug 2006, 07:22 PM
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

Wickham
09 Aug 2006, 01:34 AM
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.