How to give all divs same amount of space on each

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

Update div id foto css

   #foto{ width: 130px; height: 130px; margin:0 20px 20px 0; display: block; float:left;  

background: #FC0; }

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.

Answer 3

CSS only Solution

It is possible to achieve your layout using media queries.

Demo

This technique uses a wrap for each element to calculate the space between each square.
The spaces between blocks and between blocks and window are equal.

The code I wrote needs to be tweaked/optimized and I didn't write the queries for screens wider than 751px. I'd rather know if it is of any interest to you before I carry on.

If you want I can also give some exta details/explanations about it too as it is pretty complicated.

You might also be interted in this answer : responsive square columns

Here is the relevant code :

HTML :

<div id="container">
    <div class="wrap">
        <div class="foto">1</div>
    </div>
    <div class="wrap">
        <div class="foto">2</div>
    </div>
    ... and so on ...
</div>

CSS :

.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){

    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

Answer 4

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 5

Try adding margin to set distance among your foto. Avoid using display:inline as this is specifically for TEXTs. but "You can use it on whatever you feel like." says – cimmanon. Add padding on your inner container. Then use FLOAT.

#foto{
    width: 150px;
    height: 150px;
    margin: 10px 10px 0px 0px;
    float:left;
    background: #FC0;    
}

#lineout {
    padding: 50px 0px 50px 50px;
}

There will be a problem after closing the Div container. Setting float which jam the next elements. Here's how to solve it.

HTML:

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

CSS:

#endContainer {
    clear:both;
}