Click to See Complete Forum and Search --> : aligning images
SuzanneB
08-23-2004, 10:13 AM
HI EVERYONE!
I have a div with a number of images in it. The div has display:block to display the images vertically, but, since they are all different sizes, I want them aligned right. Text align doesn't apply, since they are images(!), so what do I use?
(Well, text align does work in IE, but not others).
crh3675
08-23-2004, 10:14 AM
float:right;
clear:left;
SuzanneB
08-23-2004, 11:18 AM
I must be doing something wrong, because that doesn't work.
This is what I have at the moment. The pics are in the div pd-pics. How should I change it?
div.pd_pics{float:right;}
.pd_pics img {display:block;
border:2px solid #666666;
margin: 0px 8px 20px 8px; }
DaveSW
08-23-2004, 11:20 AM
you float the images themselves right, rather than the container.
DaveSW
08-23-2004, 11:21 AM
.pd_pics img {
float:right;
clear: right;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}
SuzanneB
08-23-2004, 11:40 AM
The code I gave is BEFORE any change. The container has already been floated right.
div.pd_pics{float:right;}
floats the container over to the right hand side of the page.
.pd_pics img {display:block;
border:2px solid #666666;
margin: 0px 8px 20px 8px; }
Diplays the images vertically aligned and with a border.
The only problem is that the images are left aligned within the right floating div!
crh3675
08-23-2004, 11:43 AM
.pd_pics img {
float:right;
clear:left;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}
DaveSW
08-23-2004, 11:44 AM
So this doesn't work?
div.pd_pics {
float:right;
text-align: right;
}
.pd_pics img {
display:block;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}
crh3675
08-23-2004, 11:49 AM
This works:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/*<![CDATA[*/
div.pd_pics{float:right;}
.pd_pics img {
display:block;
float:right;
clear:both;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}
/*]]> */
</style>
</head>
<body>
<div class="pd_pics">
<img src="" width="300" height="25" alt="Image"/>
<img src="" width="300" height="25" alt="Image"/>
<img src="" width="300" height="25" alt="Image"/>
<img src="" width="300" height="25" alt="Image"/>
<img src="" width="300" height="25" alt="Image"/>
</div>
</body>
</html>
SuzanneB
08-23-2004, 11:51 AM
It does, yes, but only in IE.
:-(
I am also having more severe problems with these contaners ( see next post!)
That is a response to DaveSW's post....
SuzanneB
08-23-2004, 11:54 AM
crh3675 no it doesn't!
??
Paul Jr
08-23-2004, 11:59 AM
Originally posted by SuzanneB
crh3675 no it doesn't!
??
Works in Firebird 0.7 and IE 6.0 for me.
crh3675
08-23-2004, 12:04 PM
What browser are you using? Works as well for me in IE6, NS7, Mozilla and Firebird
SuzanneB
08-23-2004, 12:09 PM
Oh, I see why.
I have text nearby and the clear both is affecting the right float of the container. It is forcing the text below the container. Jees...this is complex.
( The pictures are okay, but now the text is screwed..AAARGH!)
Hi -
It sounds like you need a review of some of the basics of CSS - the box model, floats, clearing, etc. You might head over to Max Design for a review of floats before continuing to work on this problem.
When you apply clear:both; the element does just that - the text cannot lay next to your floated div because you've specifically told it not to! [No choice but to display below the items it has 'cleared'.]
Perhaps if you floated the text to the right as well, and gave it some padding or margin room on the right, it'll do what you need.
Good luck,
El
SuzanneB
08-23-2004, 12:57 PM
Forgive my cynical reply, but sounds like you need to read the thread!
:-)
I did not put clear:both; in the code, the folks trying to find a solution did.