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).float:right;
clear:left;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; }you float the images themselves right, rather than the container..pd_pics img {
float:right;
clear: right;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}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!.pd_pics img {
float:right;
clear:left;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}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;
}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=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
</div>
</body>
</html>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....crh3675 no it doesn't!
??Originally posted by SuzanneB
crh3675 no it doesn't!
??
Works in Firebird 0.7 and IE 6.0 for me.What browser are you using? Works as well for me in IE6, NS7, Mozilla and FirebirdOh, 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,
ElForgive 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.
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).float:right;
clear:left;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; }you float the images themselves right, rather than the container..pd_pics img {
float:right;
clear: right;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}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!.pd_pics img {
float:right;
clear:left;
border:2px solid #666666;
margin: 0px 8px 20px 8px;
}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;
}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=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="300" height="25" alt="Image"/>
</div>
</body>
</html>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....crh3675 no it doesn't!
??Originally posted by SuzanneB
crh3675 no it doesn't!
??
Works in Firebird 0.7 and IE 6.0 for me.What browser are you using? Works as well for me in IE6, NS7, Mozilla and FirebirdOh, 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,
ElForgive 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.