...

View Full Version : 5 side by side images within a div tag...



chasetoys
05-09-2006, 11:01 AM
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:

#foo {
top: 0px;
position: fixed;
height: 65px;
width: 20%;
overflow: visible;
visibility: visible;
float: left;
}

and then:
<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>

BUT:

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?

Thanks!

VIPStephan
05-09-2006, 01:36 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum