image align for bottom of div

[veledrom]

Hi,

I have code below and want to modify it in order to place all the images to the edges of div. The problem is, I cannot align bottom images correctly however top edge images are fine. It should be cross browser compatible though.

Thanks in advance

<style>
#imgleftttop{ float: left; vertical-align: top; }
#imgrighttop{ float: right; vertical-align: top; }
#imgleftbottom{ ??????????? }
#imgrightbottom{ ??????????? }
</style>

<div style="width: 300px; height: 300px;">
   <img id="imglefttop" src="block_top_left_edge.png" />
   <img id="imgrighttop" src="block_top_right_edge.png" />
   <img id="imgleftbottom" src="block_bottom_left_edge.png" />
   <img id="imgrightbottom" src="block_bottom_right_edge.png" />
</div>

[simplypixie]

Use margin-top with a value of 300px minus top image height, minus bottom image height

[veledrom]

Height and width are always dynamic values.

[Dandello]

You may have to use javascript to grab the size of the viewing window if that's where your dynamic height and width are coming from.

[richardtj]

try this: http://blog.userland.fr/post/2007/01/21/Align-bottom-in-float-based-CSS-column-layout