How to give all divs same amount of space on each side

Question

Hello I've got a question about a layout.

I have a website where I fill divs with information. These Divs need to be next to each other with the same amount of space between them and between the sides of the container div. I'm making it for mobile phones so I don't know the width of there screens and it should look fine on all the different screen resolutions.

Currently I've got this: Fiddle: Fiddle

HTML:

<div id="container">
<div id="lineout">
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
</div>

​

CSS:

#container {
    text-align: center;
    display: inline-block;
    margin:0 auto;
}
#foto{
    width: 150px;
    height: 150px;
    display: inline-block;  
}

#lineout {
    text-align:justify; 
}

Then it has an equal amount of space between them but not between the sides of the container.

I don't know how many divs there will come what I do know is that they are 150px by 150px. They should have the same amount of margin between them and the container, and it shouldn't matter what the size of the display is. If the screen is smaller there should be less divs next to each other but the space between them should increase or degrease. So the margins between them and the container div is the same.

Here is an image of how I want it :) s7.postimage.org/h342d0qhn/layout2.png

reformulated my question:

<div class="content">
<div class="elements-grid">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>

I need flexible/collapsing margins between the "element" divs. The gaps should be depending on the browser-width & have a "max-width" and "min-width" before collapsing (following elements switch to next row). The "elements-grid" needs to be centered within the "content".

I really appreciate your help, because I have tried everything I know. Thanks in advance!

Answer 1

If you want to do this, you'll need a little help from javascript.

The idea is to get the width of the window, and than to distribute it in between your elements.

You may find my fiddle here : http://jsfiddle.net/P84qd/

In the html file, I just changed your id's by class names (you should never have the same id twice in an html file) In the css file, I just defined the squares to be float:left.

Finally the javascript:

function resize(){
    var sizeOfImg = 150;
    var windowWith = document.body.offsetWidth;
    var widthRest = windowWith%sizeOfImg;
    var marginVal = widthRest/(Math.floor(windowWith/sizeOfImg)+1);
    var lineout = document.getElementById('lineout');
    lineout.style.paddingLeft = marginVal+'px';
    lineout.style.paddingTop = marginVal+'px';
    var fotos = document.getElementsByTagName('div');
    for(var i=0, length = fotos.length;i<length; i++){
        if(fotos[i].className === 'foto'){
            fotos[i].style.marginRight = marginVal+'px'; 
            fotos[i].style.marginBottom = marginVal+'px';        
        }       
    }
}
resize();
window.onresize = function(e){resize();};  

It might not be very optimized, but here is the idea; You first get the width of your document, you then calculate the rest of the space once you put all your squares (thus the modulo). In order to calculate your final margin size, you will need to divide the rest by the number of squares per line plus one (since you want the left and right border also in your style). Than, simply add some paddings/margins where you need to, and you're done.

In order to make it work when you resize your window, you need to call window.onresize

Hope it helps :)

Answer 2

http://jsfiddle.net/vgqNX/17/

1. When using ID's, it cannot be used more than once. Use a class to target more than one element.
2. Whitespace between your .foto elements is causing extra undesired whitespace on the page. Remove the whitespace to fix.
3. I had to put something (a non-breaking space in this instance) to give the div some content as it appeared incorrectly for me without.

The container has a left/bottom 10px padding, whilst each of the .foto elements has a top/right 10px margin. This makes them all universal, meaning you can resize your browser to have all blocks lined up and have the same border around all blocks, as you do around each block.

hope that helps?

Edit: http://jsfiddle.net/vgqNX/20/

Hopefully the above will be more what you are after?

Note: it is probably better for you to look into responsive layouts as per Urg Mu. You will notice flickering as you resize however that will only happen when you drag the window to make it bigger/smaller.