www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to evenly distribute images horizontally in a container

  1. #1
    Join Date
    Aug 2006
    Posts
    5

    How to evenly distribute images horizontally in a container

    I have 5 images which have the same height but different width. Those are tiny little images for links. What I'd like to achieve is to evenly place them horizontally in a div container. The problem I am facing by using CSS is how to distribute those images evenly in the container with % spacing so the space between the images are the same and the space will expand and contract depending on the window size. below is what I have:

    <div id="links">
    <img src="Images1.gif" >
    <img src="Images2.gif" >
    <img src="Images3.gif" >
    <img src="Images4.gif" >
    <img src="Images5.gif" >
    </div>

    So far I have tried "text-align:justify", putting images in separate div containers, margin/padding with % etc without sucess. Is this some complex in CSS or I just don't know what I am doing? Any help will be much appreciated.

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,318
    I might do something like this:
    HTML Code:
    <div id="links">
     <div><img src="Images1.gif"></div>
     <div><img src="Images2.gif"></div>
     <div><img src="Images3.gif"></div>
     <div><img src="Images4.gif"></div>
     <div><img src="Images5.gif"></div>
    </div>
    CSS:
    Code:
    #links div {
      float: left;
      width: 50px;  /* adjust to desired width */
      height: 50px; /* adjust to desired height */
      text-align: center;
      padding: 0;
      margin: 0 5px;  /* adjust as desired */
    }
    #links div img {
      border: none;
      vertical-align: middle;
    }
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Aug 2006
    Posts
    5
    Quote Originally Posted by NogDog
    I might do something like this:
    HTML Code:
    <div id="links">
     <div><img src="Images1.gif"></div>
     <div><img src="Images2.gif"></div>
     <div><img src="Images3.gif"></div>
     <div><img src="Images4.gif"></div>
     <div><img src="Images5.gif"></div>
    </div>
    CSS:
    Code:
    #links div {
      float: left;
      width: 50px;  /* adjust to desired width */
      height: 50px; /* adjust to desired height */
      text-align: center;
      padding: 0;
      margin: 0 5px;  /* adjust as desired */
    }
    #links div img {
      border: none;
      vertical-align: middle;
    }
    NogDog,

    Thanks for your reply.
    I just tried your code and it results in all images aligned to left with no space between them. What I want is all images are distributed evenly across the window regardless the window size. The images are very small in size (around 20px in width each) thus there should be space between images if distributed evenly. What I am looking for is a way to distribute those images dynamically according to browser window size.

    BTW, Why do you use "float:left" here as our concern is just what is inside of this div container not the other boxes outside of it?

  4. #4
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,318
    I use the float so that they can be displayed on the same "line" while still functioning a block-level elements, allowing the assignment of a width. Here's a better example, using a percentage for the widths, and using semantic markup (making it a unordered list):
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
    <title>Page Title</title>
    <!-- link rel='stylesheet' href='style.css' type='text/css' -->
    <style type="text/css">
    <!--
    #links {
       margin: 0;
       padding: 0;
       list-style: none;
    }
    #links li {
       float: left;
       width: 20%;
       margin: 0;
       padding: 0;
       text-align: center;
    }
    #links li img {
       border: none;
    }
    -->
    </style>
    </head>
    <body>
    <ul id="links">
     <li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
     <li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
     <li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
     <li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
     <li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
    </ul>
    </body>
    </html>
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  5. #5
    Join Date
    Aug 2006
    Posts
    5
    NogDog,

    your second sample works beautifully with even size images. But when I use images with different width, say they all have the same height but one image may be twice as wide as the other, it doesn't work in the same way. I believe it is due to the % assignment mismatch or something like that. Is there anyway to distribute those uneven size images evenly too?
    Many thanks in deed.

  6. #6
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,318
    All I can suggest is to tweak the LI widths - you might want to use in-line style attributes to override the stylesheet default value:
    Code:
    <li style="width: 18%">....</li>
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  7. #7
    Join Date
    Aug 2006
    Posts
    5
    Quote Originally Posted by NogDog
    All I can suggest is to tweak the LI widths - you might want to use in-line style attributes to override the stylesheet default value:
    Code:
    <li style="width: 18%">....</li>
    The inline style helps. But now, I guess it was the same before, the far right image will drop below the line when browser window size is reduced. Is there anyway to prevent images from dropping below?

    Thanks

  8. #8
    Join Date
    May 2006
    Posts
    135
    the best I can come up with is something like this

    Code:
    <html>
    <body>
    
    <ul style="width: 100%; background-color: red; list-style-type: none;">
    <li style="display: inline; margin: 10%;">One</li>
    <li style="display: inline; margin: 10%;">Two</li>
    <li style="display: inline; margin: 10%;">Three</li>
    <li style="display: inline; margin: 10%;">Four</li>
    </ul>
    
    </body>
    
    </html>
    You can change the margin: 10% in the <li> tags to match the amount of images you have. So for example if you have 10 images, you want to set the margin to 5% because it'll take up 5% on each side of the <li> tag, which will make it 10% for each <li> tag and since there are 10 <li> tags, then it will come out to an even 100%. I used 10% for mine because I only have 4 elements. You get the picture. I've tried using auto, but that doesn't work. I wonder why. If someone knows can they please explain.

    Too bad there's no way to use the * wildcard character in CSS. That way we can just use margin: *% and let the browser take care of the rest. Well hope that helps a bit.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles