Exactly positioning three images in one <div> tag?

Forum Moderators: not2easy

Message Too Old, No Replies

Exactly positioning three images in one <div> tag?

dickbaker

1:58 pm on Apr 23, 2011 (gmt 0)

I have three ad images that I need to position in one <div> layer. One image needs to be at the top left corner of the layer. The other needs to be at the top right corner, so that its top lines up with the top of the first image

The third image needs to be at the right edge of the layer, below the second image.

I can't get this to work. The images are all over the place.

I can already do it using two different <div> layers, but I need it to be in one in order to get the whole thing to work.

Is it possible?

Thanks for any replies.

birdbrain

3:49 pm on Apr 23, 2011 (gmt 0)

Hi there dickbaker,

here is a possible solution for you to try...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>left, right, and right under</title>

<style type="text/css">
#container {
   width:760px;
   border:1px solid #999;
   margin:20px auto 0;
   overflow:hidden;
 }
#top-left {
   float:left;
 }
#top-right {
   float:right;
   margin-bottom:10px;
 }
#bottom-right {
   float:right;
   clear:both;
 }
</style>

</head>
<body>

<div id="container">
  <img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
  <img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
  <img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
</div>

</body>
</html>

birdbrain

lucy24

10:03 pm on Apr 23, 2011 (gmt 0)

To save the rest of y'all some clicking: Works perfectly on all five current Mac browsers. Now to see which version of MSIE makes a botch of it...

dickbaker

11:01 pm on Apr 23, 2011 (gmt 0)

Thanks! I'll give that a try and see if it works across all browser platforms.