How can I align these image?

Hello,

I would like to align these images horizontally with a little space between them.



I'm using blogger platform

I really need your help.

Thanks

 

Place it inside a div container, specify width of the div to display all your pics horizontally with spaces in between.

 

Can you please show me how to do that because I'm a beginner in html and CSS

 

You can use old-school HTML to build a table containing the images:

<table>
<tr>
<td><img src="image1.gif"/></td>
<td><img src="image2.gif"/></td>
<td><img src="image3.gif"/></td>
<td><img src="image4.gif"/></td>
<td><img src="image5.gif"/></td>
<td><img src="image6.gif"/></td>
<td><img src="image7.gif"/></td>
</tr>
</table>

Code (markup):

Or you can use CSS to align the images, via floating them:

HTML:

<div id="images">
<img src="image1.gif" />
<img src="image2.gif" />
<img src="image3.gif" />
<img src="image4.gif" />
<img src="image5.gif" />
<img src="image6.gif" />
<img src="image7.gif" />
</div>

Code (markup):

CSS:

#images img { float: left; border: none; }

Code (markup):

You'll want to make sure you're clearing these images before displaying any further content to keep everything aligned properly.

 

with float: left.

 

for example.
if you are using code.
<div id="container">
<img src="image1.gif" />
<img src="image2.gif" />
<img src="image3.gif" />
<img src="image4.gif" />
<img src="image5.gif" />
<img src="image6.gif" />
<img src="image7.gif" />
</div>


use css..

#container img { float: left; border: none; }

thanks

2webros