How do I position images at all four corners of a div?
+---------------------------------+ |+---+ +---+| || | | || || | | || |+---+ +---+| | | | | | | | | | | |+---+ +---+| || | | || || | | || |+---+ +---+| +---------------------------------+
Absolutely position the images, specifying top:0, right:0, bottom:0 and left:0 where appropriate. You'll have to position the div so it can act as a container for the positioned images.
div.container { position:relative; /* etc. */ } img.positioned { position:absolute; height:63px; width:122px; } img#topleft { top:0; left:0; } img#topright { top:0; right:0; } img#bottomleft { bottom:0; left:0; } img#bottomright { bottom:0; right:0; } <div class="container"> <img src="image.gif" class="positioned" id="topleft"> <img src="image.gif" class="positioned" id="topright"> <img src="image.gif" class="positioned" id="bottomleft"> <img src="image.gif" class="positioned" id="bottomright"> <!-- etc. --> </div>