Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: not2easy

Exactly positioning three images in one <div> tag?

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

WebmasterWorld Senior Member 10+ Year Member



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.
3:49 pm on Apr 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
10:03 pm on Apr 23, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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...
11:01 pm on Apr 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month