Float: right is messing up the order

Question

In the project im making, I want users to be able to upload images. Those images MUST be ordered from first uploaded to last uploaded.

Take a look at the following code:

body{
color:white;
}

#wrap{
margin-top:10px;
overflow:hidden;
}

#container{
background:#121212;
max-width:250px;
padding:5px;
overflow:hidden;
float:right;
padding:5px 5px 0 0;
}

.img_c{
height:50px;
overflow:hidden;
float:right;
margin:0 0 5px 5px;
}

.img_c img{
max-width:100%;
max-height:100%;
}

.l{
float:left; /*When I use this, images are displayed in the correct order*/
}

.r{
float:right; /*Wierd behavior!!*/
}




Float:left






































Float:right

As you can see, when I float the contents of #container to the left, everything is ordered that way:

[img0001] [img0002] [img0003] [img0004]
[img0005] [img0006] [img0007]
[img0008]

Which order my images in the correct way. Yay!

But when I use float:right, every row of images is inverted, which means I can't just reverse the list of images in the DOM.. Basically, it gives us the following result:

[img0004] [img0003] [img0002] [img0001]
          [img0007] [img0006] [img0005]
                              [img0008]

This is what I expected:

[img0001] [img0002] [img0003] [img0004]
          [img0005] [img0006] [img0007]
                              [img0008]

How can I resolve this issue?

Side note: Someone just suggested Javascript had nothing to do with the question. The thing is, if theres no CSS-only solution, I won't bother using a Javascript solution.

Big thanks in advance.

rafaelcastrocouto · Accepted Answer

In order to avoid the "order mess" instead of float: right use the combination of display: inline-block and text-align: right.

I also changed your duplicated IDs to class names.

body{
color:white;
}

.wrap{
margin-top:10px;
overflow:hidden;
}

.container{
float:right;
background:#121212;
max-width:250px;
padding:5px;
overflow:hidden;
padding:5px 5px 0 0;
}

.img_c{
height:50px;
overflow:hidden;
margin:0 0 5px 5px;
display: inline-block; /* here's the trick */
}

.img_c img{
max-width:100%;
max-height:100%;
}

.cl{
text-align:left;
}

.cr{
text-align:right; /*no more weird behavior!!*/
}




Float:left






































Float:right

Float: right is messing up the order

Answers (1)

Related Questions