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…
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;
}
.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.
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.
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!
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.
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…
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?