Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    6
    Thanks
    0
    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:

    #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!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •