How to stack images on top of each other when images are Floating?

**WorldNews** · Mar 17, 2010 23:31

Hello,

We offer a free Blog service, and one of the features of this free blog service is that you can have your fotos that you have added to your Blog show via the Light Box effect.

And we use
<div class="image-float-right">
to for example float the images on the right side, if the user has chosen to display them on the top right side.

However if there are more than 1 images being floated right, rather than them stacking on top of each other, they are being placed next to each other which is not what should be.

For an example, take a look at this user Blog:
http://www.anoox.com/news/show_selec...?article=38632

As you can see the images rather than being stacked on top of each other, are seating to next each other. Now you can imagine how bad it will be if there are 5 such images.

So using the
<div class="image-float-right">
how do we get them to stack up right on top of each other?

Regards,

**felgall** · Mar 17, 2010 23:58

Do you mean actually on top of one another so only the top most one displays or do you mean down the right side of the screen?

For the first of these you'd need to use position:absolute

For the second the easiest way is probably to place the images inside a container and float that right instead of the individual images.

**RyanReese** · Mar 18, 2010 07:33

You could have that calss add a "clear:right"

.

Untested though.

**WorldNews** · Mar 18, 2010 08:20

Hello,

Yes, I mean the 2nd one. That is have the fotos all aligned on top of each
other down the right side. Of course the user can have the option of
having them go across, as they like. But for this discussions purpose
I am looking for the solution to have the fotos aligned down the right side.

So how doese one "place the images inside a container"?
I mean is that a CSS thing? or what?

Originally Posted by felgall

Do you mean actually on top of one another so only the top most one displays or do you mean down the right side of the screen?

For the first of these you'd need to use position:absolute

For the second the easiest way is probably to place the images inside a container and float that right instead of the individual images.

**Paul O'B** · Mar 18, 2010 08:51

Hi,

You already have a class set up in style_blog.css to float the images and you could just add clear:right to it.

e.g.

Code:

.image-float-right  {
border:2px solid  #000000;
clear:right;
float:right;
margin:5px 2px 10px 15px;


}

Or set up a similar new class if its just for that section only.

**WorldNews** · Mar 18, 2010 09:35

Hi,

It is amazing, it is now working OK.
I mean I had the clear:right; in there but it was below float:right;
and it was not working Ok, once I moved it above it is working OK!
Did not know that it was this sensitive!!!

cheers,

Originally Posted by Paul O'B

Hi,

You already have a class set up in style_blog.css to float the images and you could just add clear:right to it.

e.g.

Code:

.image-float-right  {
border:2px solid  #000000;
clear:right;
float:right;
margin:5px 2px 10px 15px;


}

Or set up a similar new class if its just for that section only.

**RyanReese** · Mar 18, 2010 15:35

No it doesn't

Code:

<!doctype html>
<html>
<head>
<title>asdf
</title>
<style>
div{
background:red;
clear:right;
float:right;/*switch these up*/
height:40px;
width:40px;
margin:6px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Order of properties doesn't matter (most of the time, anyways)

User Tag List

Thread: How to stack images on top of each other when images are Floating?

Thread Tools

Display

How to stack images on top of each other when images are Floating?

Bookmarks

Bookmarks

Posting Permissions