HTML Help

NickiP · Joined: 21 Feb 2008 Posts: 2

I have a bunch of thumbnails and icons that i want to put on my myspace... problem is, is that they go one on top of the other.... i want them to sit side by side... like in a 3 by 3 box or something... i cant seem to make the code work.. or find one that just may help me... THANK YOU in advance

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4235 Location: MS

Try this:

<div style="width: XXpx; margin: 1% auto;">
<img style="width: XXpx; height: YYpx; border: 0;" src="URL_to_Image1" title="Mouseover Description" alt="Text Description"><img style="width: XXpx; height: YYpx; border: 0;" src="URL_to_Image2" title="Mouseover Description" alt="Text Description"><img style="width: XXpx; height: YYpx; border: 0;" src="URL_to_Image3" title="Mouseover Description" alt="Text Description"> </div>

Set the width: XXpx to the width that all three images will need. Div height should adjust automatically, but you can add height: YYpx; to the div styling and set it to the highest image.

The margin: 1% auto; sets the div container with a top/bottom margin of 1% and centers it in whatever container the div itself is.

If you still have problems with images not side by side, make sure div width is wide enough for all images and/or set inside all the image tags' styling:

float: left;

HTMLsucker · Joined: 17 Aug 2008 Posts: 3

I need help with that too. Could you make that easier for a beginner please? :oops:

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4235 Location: MS

@HTMLsucker:

Not sure about easier as I have no idea what you don't understand about the code given.