How to get images lined up on the bottom of a page, next to each other, left to right

HTML & CSS
1

Hello,

We offer a free Blog service, and as part of this free Blog service people can add fotos to their Blogs.

Recently we switched the method for lining up the user fotos to be CSS based. With the user able to select for a foto added to their Blog to be on right-top or left-top of their Blog or at the bottom of their Blog.

However I am having problem getting the fotos that are added to the bottom of a Blog to line up appropriately. That is we want the fotos added to the bottom of a Blog to be lined up next to each other, left to right as they are added.

How do we get this done?

FYI, we are using this CSS definition now, which is not doing the job right:

.image-bottom {
	border: 0;
	clear: bottom;
	float: bottom;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 15px;
	margin-bottom: 15px;
	}

You can see an example of what I am referring to here on this user Blog:

Also when a user adds a foto to be bottom based, then the rounded corner affect at the bottom of the Blog page breaks, as you can see from above example. So how do we correct this issue too?

Regards,

2

Float bottom/clear bottom doesn’t exist.

If you want hte images side by side just don’t float it at all :). They are inline elements and will naturally sit next to each other.

If they are wrapped in a block element or something then just give it float:left; instead of float:bottom (float:bottom/clear:bottom don’t exist)

3

Hello,

I have done what you suggested, that is remove float & clear bottom, so now its related class is:

.image-bottom {
border: 0;
margin-left: 5px;
margin-right: 5px;
margin-top: 15px;
margin-bottom: 15px;
}

However the images in bottom of a Blog still do not seat next to each other!
Instead they are stacked on top of each other which should not be the normal way they display on the bottom.

Regards,

4

Havent haed much success with this one…

5

The images are wrapped in the div with class image-bottom. Give that div a float left. Ryan already provided you with that fix :wink:

6 
.image-bottom{float:left;}
7

Hey ThanX, that works fine, but there is another problem.

The fotos at the bottom of Blogs are now lining up correct, however the
fotos at the bottom of the Blog are outside of the body area of the Blog,
as you can see here:

or have broken the rounded corner effect of the bottom of the Blog body.
Do you know what to do to correct this problem?

FYI, I have checked and dbl checked and all the Div pairs are correctly
closed by the Php code that generated this page.

Regards,

8

Hi that’s because the images are floated and theyare taken out of hte flow. So basically the parent doesn’t even know they are there :). You need the parent to have a clearing mechanism on it

.blog_text_rounded{overflow:hidden;}
9

It works fine now :slight_smile:

Man where did you get this overflow:hidden; thing?
I did not know such a thing existed and I still do not know how exactly it is taking care off this problem. Must read up on it.
Is this part of a new CSS release?

Anyway, Thanx again. U are the King of CSS :slight_smile:

10

As Ryan pointed out, because the containing element doesn’t know about the floats, you need a clearing: overflow:hidden is the latest one in clearing elements. The ‘old’ method, was by using clear:both with an extra html element but now a days, overflow: hidden achieves the same effect without extra mark up.

You can read about in this this sitepoint article :slight_smile:

11

Thanks lol :).

It has a side effect of being a clearing mechanism. Just a little nifty thing :slight_smile:

Technically the old way was (before overflow:hidden) was overflow:auto

Paul O’b invented this. It’s nifty and easy to use overflow:hidden, though if you have a design detail that you need hanging out then you should shy away from this and use the clearfix (or the clearing element) instead.

12

I was referring to the old way before the old way :wink:

13

I knew what you meant I just wnated to clarify ;). I’d love to know the history, or rather, what claering methods came first.

As I understand it (sorry to take over your thread!) it was
Clearing div
establishing a block context
overflow
clearfix

14

If i’m not mistaken it’s:

a cleared element, as the W3C suggested (div or the ugly <br style=“clear:both”/>)
Aslett/PIE Method (pseudo class (:after)) AKA clearfix
Floating nearly Everything (FnE) method
overflow:auto that turned into the overflow:hidden