How does one float images next to each other using CSS code

[WorldNews]

Hello,

I want to float images uploaded by members next to each other, from left to right.
And when there is no more room then the code should auto line them in the next
line so as not to break the browsers..

You can see a sample of what I mean here:
http://www.anoox.com/news/profile_view.php?user=2466798

as you see the fotos are getting loaded on top of each other rather than next to each other.

And FYI, here is the CSS code we are currently using for aligning these images:

.image-float-left {
clear:left;
float: left;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px; /* These margin defintions ensure that the Text does not seat too close to image */
border: 1px solid black;
padding: 3px;
}


What do you suggest to correct this?

Regards,

[Pamela1991]

Take out "clear:left;".

.image-float-left {
/*clear:left;*/
float: left;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px; /* These margin defintions ensure that the Text does not seat too close to image */
border: 1px solid black;
padding: 3px;
}

You can also take out "float: left;" as it is being inherited by its parent.

[ralph.m]

Yes, clear: left is causing the problem, because it means "don't let anything sit to the left of me!" But of course, you do want things to sit to the left of the images ... namely, the previous images.

[dresden_phoenix]

You can also take out "float: left;" as it is being inherited by its parent.

Just anote that the float property does not cascade That is, floating a parent does not give a child float.

==

[WorldNews]

Hey ThanX.
This took care off the problem.

But frankly cannot believe I am still having such problem with certain elements of CSS
I mean this clear:left; stuff just makes no intuitive sense to me!

Take out "clear:left;".
.image-float-left {
/*clear:left;*/
float: left;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px; /* These margin defintions ensure that the Text does not seat too close to image */
border: 1px solid black;
padding: 3px;
}

You can also take out "float: left;" as it is being inherited by its parent.

[ralph.m]

clear:left; stuff just makes no intuitive sense to me!

Why not? You've seen its exact purpose in practice now. Sometimes you may want to float something but not have anything else sitting to its left. That makes clear: left very handy. It can help keep things just where you want them.

[Pamela1991]

Yes, clear: left is causing the problem, because it means "don't let anything sit to the left of me!" But of course, you do want things to sit to the left of the images ... namely, the previous images.

Thanks for explaining, Ralph. This is why I use to get points deducted in math class sometimes (for not showing my work ). Frankly, I'm still nowhere near well-versed enough in CSS to explain things... as you can see below...

Just anote that the float property does not cascade That is, floating a parent does not give a child float.

==

Thanks for clearing that up, Ray. When I inspected the element in question, I noticed that "float: left;" was being ignored. I wrongly assumed it had to have been from a parent, but it turns out I was wrong. What was causing that float to be ignored?

[Paul O'B]

When I inspected the element in question, I noticed that "float: left;" was being ignored. I wrongly assumed it had to have been from a parent, but it turns out I was wrong. What was causing that float to be ignored?

the float:left was crossed out in the inspector because an inline style was providing the float:left and therefore had higher specificity.

<div class="image-float-left" style="float: left;">

element.style {
    float: left;
}
.image-float-left {
    border: 1px solid black;
    float: left;

[Pamela1991]

the float:left was crossed out in the inspector because an inline style was providing the float:left and therefore had higher specificity.

<div class="image-float-left" style="float: left;">

element.style {
    float: left;
}
.image-float-left {
    border: 1px solid black;
    float: left;

Oh, that makes sense now . Thanks for clearing that up for me, Paul.