-2

How can I place images like follow :

enter image description here

I would like the spaces between the images to be the same. Also while resizing the window, I would like the spaces to update so that each space always has the same size.

<div id="panel">
    <img id="icon1" class="icon" src="...">
    <img id="icon2" class="icon" src="...">
    <img id="icon3" class="icon" src="...">
</div>

Here is what I have : http://jsfiddle.net/eBLgP/2/

It looks a lot like this post : Fluid width with equally spaced DIVs

But it's not the same, I would like spaces also between the right and left side of the div. Also the example above seems quite complicate to me.

Community
  • 1
  • 1
Elfayer
  • 4,411
  • 9
  • 46
  • 76
  • Did you have any chance to take a look at: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs?rq=1 – Hashem Qolami Mar 22 '14 at 13:55
  • Do you want it with a fixed width? or a fluid with? – Carl0s1z Mar 22 '14 at 13:58
  • @CTravel I would like it to be automaticaly spaced so that it's still correctly spaced while resizing. – Elfayer Mar 22 '14 at 14:03
  • @HashemQolami I have seen that question, that's not what I want and I didn't succeed to change the css as I want it. – Elfayer Mar 22 '14 at 14:04
  • Is there always only 3 images, and are they always the same size ? – Pierre Granger Mar 22 '14 at 14:30
  • Could be more than 3. The space between each images and the border right and left of the div must adapt. Images are all the same size. – Elfayer Mar 22 '14 at 14:47
  • are the images loaded from a static or dynamic source? if you want to add the same spacing, you also need to stretch the container, and that could be performed in a more easy way by javascript, not pure css – Juan Carlos Alpizar Chinchilla Mar 22 '14 at 14:58
  • Hm... Images are loaded statically I guess. They are loaded in the HTML. If there are more images, I'll add them on my HTML with the tag `` like the others. The css could change in this case, I could change some of my css in the same time, but if it could be automatic, it would be cool. Like when using percentage or `auto`. – Elfayer Mar 22 '14 at 15:03
  • Edit question, I changes the illustration. – Elfayer Mar 22 '14 at 17:26
  • 1
    Sorry I didn't have connection on the road... is this something like what you're looking for? http://jsfiddle.net/eBLgP/6/ since you said you didn't want javascript you'll have to manually adjust the wrapper and images with to make them fit as long as you add or remove images – Juan Carlos Alpizar Chinchilla Mar 22 '14 at 20:42
  • @JuanCarlosAlpizarChinchilla Exactly !! =) But is there no other way than this trick ? – Elfayer Mar 22 '14 at 20:47
  • Using just css there's I can't think in a way to short the margin or enlarge the image width without knowing how many items you'll get, however javascript works once the DOM is ready, you could alter CSS of those there cause you know how many images will be loaded exactly and calculate those margins and widths. – Juan Carlos Alpizar Chinchilla Mar 22 '14 at 21:48
  • I mean I would have prefer just use css on `` and not add a `
    ` container.
     – Elfayer Mar 23 '14 at 09:44

2 Answers2

1

Updated fiddle:

http://jsfiddle.net/eBLgP/5/

final code, with responsive behavior:

#panel {
border: 2px solid blue;
    overflow: auto;
}

.icon-container {
    float: left;
    width: 33.3%;
    text-align: center;
}

when you make elements float you can sort them all in the same line and same orientation as long as they're floating in the same direction, however for the parent container (panel div in this case) to recognize the height of containing elements you need overflow property, so add

overflow: auto;

Now you can add a div to contain the images, because using a width directly on images would alter the image dimensions and that's not what is intended.

Once you got floating div elements, you can spread them with a percentage based with, granting all of them will have the same space inside your container, doesn't matter how big or small the screen becomes .

The only thing left is to center images inside their parent containers, since divs are block display by default, you can use text-align: center to grant all of the children elements of parent (the images in this case) will be centered

Juan Carlos Alpizar Chinchilla
  • 880
  • 9
  • 23
  • In your solution, the spaces are not dynamic, but it's not a problem, I could change the css by hand in your case if I had to add or remove images. The problem in your solution is that the spaces are not all the same. It's quite like what I want, but not exactly. I would like all the spaces to be the same. (between each image and the right and left border of the div) – Elfayer Mar 22 '14 at 14:50
  • If you want the space to be dynamically calculated you should make it via js not pure css – Juan Carlos Alpizar Chinchilla Mar 22 '14 at 16:11
  • When I say dynamically I mean not using `px` or `em`. Isn't it possible with percentage, `auto`, `align`, `position` or anything else ? – Elfayer Mar 22 '14 at 16:17
  • It's not exactly what I wanted, but it's the closest result I found. – Elfayer Apr 22 '14 at 07:32
0

You can try by using text-align:justify and adding 1 line on bottom like this : http://jsfiddle.net/26CLe/1/

#panel {
    border: 2px solid blue;
    text-align:justify ;
}

#panel:after {
    content:'';
    display:inline-block;
    width:100%;
}

The only problem is that it add a little line on bottom, but justification is okay. This solution came from here : http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites

Pierre Granger
  • 1,993
  • 2
  • 15
  • 21
  • That's more like what I'm looking for, the thing is that in your example, there are no margins on the left and right sides. – Elfayer Mar 22 '14 at 14:10
  • in the sample given in your question the images have margins on both sides... can you be more specific on what are you looking for? – Juan Carlos Alpizar Chinchilla Mar 22 '14 at 14:24
  • Yeah i understand what you mean, if you want exactly the same width on left/right and between images it can be hard, but you can had padding on #panel like this : http://jsfiddle.net/26CLe/2/ What do you know exactly ? Is there always 3 elements on the line ? Are each elements always same width ? Does it have to fit on multiple lines (like 20 images on XX lines) ? – Pierre Granger Mar 22 '14 at 14:24
  • if I get this clear, my reply above can be an option on what Elfayer is looking for, if no margins in first and last image are required @PierreGranger is a good solution, Elflayer can you check both answers (Pierre and mine) and tell us if something of those are what you're looking for? – Juan Carlos Alpizar Chinchilla Mar 22 '14 at 14:37
  • In fact the question is : is there only 3 images and are they always same width. If yes, your solution is really better. If no (like 4, 5 images) or if images could be different width, it's gonna be much more difficult.. – Pierre Granger Mar 22 '14 at 14:41
  • Currently there are 3 images, but could be more. I'd like a CSS that places the images whith the same space between each other AND the borders right and left of the div. Images are always 64x64 in reality, it won't move, and they all are the same size. – Elfayer Mar 22 '14 at 14:45
  • can the panel size adjust according the amount of images or should it be a fixed size? – Juan Carlos Alpizar Chinchilla Mar 22 '14 at 15:20