Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
05-09-2006, 10:01 AM #1
- Join Date
- May 2006
- Thanked 0 Times in 0 Posts
5 side by side images within a div tag...
the theme of 5 continues on with my web development :P
So i just want 5 images to display side by side at the top left of the page. so i have the following code:
<div class="style1" id = "foo"><img src="image.gif" width="65" height="65" /><img src="image.gif" width="65" height="65" /><img src="image.gif" width="65" height="65" /><img src="image.gif" width="65" height="65" /><img src="image.gif" width="65" height="65" /></div>
I get the following stupid results: only the first image shows... so I did some testing:
1) if you put text before the image, the image gets bumped down to the next line...
so how do i get five side by side images within that good ol' div tag?
05-09-2006, 12:36 PM #2
- Join Date
- Jan 2006
- Halle (Saale), Germany
- Thanked 1,005 Times in 978 Posts
Images are inline elements, and hence they will be displayed side by side anyway. However, you have a div with a width of 20% and I doubt that there is enough space for the images (with 65px width each). Ok, you have overflow: visible; but I'm not quite sure why you would set 20% width if the overflow is more anyway and you want it to be visible (FYI: with overflow: visible; IE will stretch the div to the width of the content anyway - that's one of it's numerous bugs). Also position and float together don't make much sense to me.
Just the div with the images inside should do it. And you can still position it - then it will also collapse to the width of the content.