horizontal alignment of images

[brotha bran]

i'm trying to align a number of images horizontally so they don't reach a point where they wrap. much like jeff allen's site (see jeffphoto dot net), but without the need to click on it to enlarge as he made them all one wide image. on another forum, i was given this advice:


CSS Code:

div.pics { width:100%; overflow:auto; height:500px /* tallest picture height */ padding:10px; }


HTML Code:

<div class="pics"><img ...><img ...><!--etc--></div>

And you just place all the images between the div tags. I am pretty sure you still can't have spacing in them. So you can add this too:
Code:

img { margin:0px 5px 0px 5px; }

And now they will place themselves apart automatically.


I did the CSS and have inserted the image tags into the html, but where do I put the last part about margins? In the CSS or html. Any help would be greatly appreciated, or if there's an easier way. thanks!

[Broes]

U just put it in the css, but then in the html you have to call the css-command for instance:

add the following line in css:
div.img { margin:0px 5px 0px 5px; }

and then in the html:
<div class="pics"><div class="img"><img ...></div><!--etc--></div>

suppose you could also enter spaces... not sure if that works though, have had a lot of trouble with that. Or use tables. Or use the "float" command (for more info w3schools.com)

Hope I helped you!

[mohan37]

use tables dude. it's a much easier fix than trying to do some weird alignment stuff. <td>'s won't ever wrap, as far as I know, so you could have your pics extend 10000px off the screen if you wanted.

um, don't have them go that far though. haha.