homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Exactly positioning three images in one <div> tag?
dickbaker

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4302953 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4302953 posted 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

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



 
Msg#: 4302953 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4302953 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved