Member Avatar for 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>
Edited by veledrom because: .
  • 4 Contributors
  • 4 Replies
  • 154 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by richardtj
Member Avatar for simplypixie

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

Member Avatar for veledrom

Height and width are always dynamic values.

Member Avatar for 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.

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.