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>

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

Height and width are always dynamic values.

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.