a way to put multiple images in a div?

**Dionysis** · Feb 11, 2004, 23:12

Is there a way to put multiple images in a div? like topleft, topright, bottomleft, bottom right? or for each image does it need its own div? this should be quick questions hopefully!

**adios** · Feb 11, 2004, 23:52

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

#container {
            position: relative;
            width: 150px;
            height: 150px;
           }
img.TL     {
            position: absolute;
            left: 0;
            top: 0;
           }
img.TR     {
            position: absolute;
            left: 75px;
            top: 0;
           }
img.BL     {
            position: absolute;
            left: 0;
            top: 75px;
           }
img.BR     {
            position: absolute;
            left: 75px;
            top: 75px;
           }

</style>
</head>
<body>
<div id="container">
<img class="TL" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
<img class="TR" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
<img class="BL" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
<img class="BR" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
</div>
</body>
</html>

You can also use CSS float...but you'll run into problems with rendering quirks, requiring specific hacks to correct. I believe this way is more consistent. Maybe not...

http://css.maxdesign.com.au/floatutorial/

**Dionysis** · Feb 12, 2004, 00:26

Thanks,
i tryed that but the absolute positioning knocked the images out to stick to the corners of my browser, not the corners of the div. so... what am i doing wrong here?

**redux** · Feb 12, 2004, 02:05

Originally Posted by Dionysis

Thanks,
i tryed that but the absolute positioning knocked the images out to stick to the corners of my browser, not the corners of the div. so... what am i doing wrong here?

did you style the container as well ? it needs at the very least the

Code:

position: relative;

rule. basically the container needs to be positioned (even if, as with the example above, you're not actually moving it anywhere...it's position relative, but you're not providing an offset from its normal position).
the reason being that absolute positioning always refers to the closest parent element which has been positioned. without it, it will always end up referring to the window/document as a whole.

**Dionysis** · Feb 12, 2004, 02:37

sweet i'll give it a try

**Dionysis** · Feb 12, 2004, 02:51

How can i absolutely position things with respect to the bottom of a DIV. i tryed just

Code:

bottom:0;

but that didn't work

**Paul O'B** · Feb 12, 2004, 04:43

Hi,

bottom should work as long as you have specified a position absolute as well.
e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
 width:300px;
 height:300px;
 position:relative;
 background:#ffffCC;
}
#inner {
 position:absolute;
 bottom:0;
 left:100px;
 width:100px;
 height:25px;
 background:red;
}

</style>
</head>
<body>
<div id="outer">
<div id="inner">inner</div>
</div>
</body>
</html>

Paul

The SitePoint Forums have moved.

User Tag List

Thread: a way to put multiple images in a div?

Thread Tools

Display

a way to put multiple images in a div?

Bookmarks

Bookmarks

Posting Permissions