Aligning images next to each other

Forum Moderators: not2easy

Message Too Old, No Replies

Aligning images next to each other

Without a small space in between

adb64

11:35 am on Sep 5, 2006 (gmt 0)

On my site I have a number of small images which I want right next to each other. But to avoid very long lines in the HTML I want to put each image on a new line:


<img src=".." width=".." height=".." alt="..">
<img src=".." width=".." height=".." alt="..">
...
<img src=".." width=".." height=".." alt="..">

When doing this, the newline at the end of each line inserts a space in between two adjacent images.
Is there a way, using CSS, to set this space to 0, so the image are right next to each other?

Thanks,
Arjan

Ingolemo

2:09 pm on Sep 5, 2006 (gmt 0)

This isn't a CSS solution, but the way this would be done in the past is to put the newlines inside the tags.

<img src=".." width=".." height=".." alt=".."
><img src=".." width=".." height=".." alt=".."
><img src=".." width=".." height=".." alt=".."
>...

It's not quite as readable, but is certainly better that having them all on one line.

adb64

8:17 am on Sep 6, 2006 (gmt 0)

I played around with some CSS and found the following solution which, at least in my case, removed the space introduced by the end of line. In the CSS for the div containing all the images I added:


letter-spacing: -1em;

Then all images are aligned adjacent to each other in the same way as when they are all in one line.

Setek

10:12 am on Sep 6, 2006 (gmt 0)

There is another easy solution to remove the standard space that applies when encountering a carriage return and/or tabs (and/or a space, of course :D):

Float the images.

Simple :)

adb64

11:58 am on Sep 6, 2006 (gmt 0)

Setek, you're right.
But that wouldn't work in my situation as the images should be horizontally centered on the page. The CSS of the images container DIV has a 'text-align: center;' and the number of images may vary from page to page all using the same CSS file.

Regards,
Arjan

doodlebee

2:06 pm on Sep 6, 2006 (gmt 0)

That's why you use divs to contain them. For example:

#container{
position:relative;
width:70%;
}

#inner{
position:absolute;left:50%;
}

#images{
position:relative;
left:-50%;
}

#images img {
float:left;
}

That'll keep the images centered (the above is a trick to center an unknown width element) no matter how many you add or take away.

meybaud35mm

3:09 pm on Sep 6, 2006 (gmt 0)

doodlebee is right. if you insist on using traditional html to insert images as opposed to css backgrounds, etc. i would recommend containing them with divs and then modifying your selectors from an external style sheet.

regards...

adb64

10:32 am on Sep 7, 2006 (gmt 0)

Everyone thanks for the responses.
Doodlebees solution doesn't give me the desired result, as much more is involved than only centering some images.
So I will stick with my letter-spacing: -1em; solution.