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!

Steeplejack

I'm confused, like this?: jsfiddle.net/vgqNX/2 – Sharilyn

HI i thing u want to this jsfiddle.net/vgqNX/3 – Neely

Hey Thanks for your answers, I want a layout where there are divs of 150px wide and 150px height next to each other the space between the divs and the container should be the same if you resize the screen divs should go down if they don't "fit" any more. But then all the DIVs should again have the same amount of space around them. like this: image of layout – Steeplejack

Than you can used to this one jsfiddle.net/vgqNX/6 – Neely

With that solution you've got a "fixed" margin of 1px the margin should be the same as the amount of white space on the left and the right. With that Fiddle you've got an amount of white space on the right no white space on the left and the amount of margin between them is not equal to the amount of space on the left and the right. But i appreciate your answers :) – Steeplejack

@user1826384 That 1px margin you think you're seeing in Rohit's fiddle isn't a margin at all. Its a space (caused by newlines/tabs/spaces in your markup), and it shows up whenever you specify inline or inline-block. – Boynton

An id should be unique and never be used on several elements. Use class instead. – Villareal

Thank you for your comment :), stupid mistake from me but it doesn't solve the problem, What i've got with the layout. Please see the image in the question I hope the problem will be more explained with it. – Steeplejack

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 :)

Stillborn

Thank You :D!!!!!!!! That was exactly what i needed :) I'm going to implement it right away! Thank you so much I've never thought of using javascript for this problem, but now when I see it, it makes it totally clear :) Thank and again, Thanks :) – Steeplejack

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.

Wrought

Thanks for your answer :) But it's not what i'm looking for When you resize your browser screen that there are almost 4 divs in a row. But you see still 3 in a row there is a huge white gap on the right side of the divs. And I want that, that white space is divide equally between all the divs So for example that the margin is flexible and it expand or degrease by the amount of white space thats left. I hope you can help me :) – Steeplejack

Answer 3

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;
}

Disrepute

"Avoid using display:inline as this is specifically for TEXTs" says who? You can use it on whatever you feel like. – Boynton

Thank you for your answer :) but it's not exactly what i meant you've got a padding of 50px at your lineout div, but I want the margin what you've got 10px; to be the same as the padding of 50px;. (And no not give the margin 50px :P) The margin should change when you resize your window so when you resize it the margin and in your case the padding change and both of them are the same. So the foto Div has on all sides an equal amount of margin. – Steeplejack

I mean like this image: s10.postimage.org/eltd72vo9/layout.png Here you see the gray divs with an equal amount of space between them. And then I want if you change the screen size that the amount of space between them change so this will be again equal to each other. It's a little difficult to explain.. – Steeplejack

just change the value of the margin. be reminded, that's margin:top right bottom left; respectively. to solve the changing on size according to screen, check this.. seesparkbox.com/foundry/structuring_a_responsive_stylesheet – Disrepute

using INLINE would result displaying element like SPAN – Disrepute

Thank you for your answer! :) But isn't there an easier way then using media queries I know how they work but it's a lot of work to this for a lot of different screen sizes for mobile phones. But I know what you mean :) Here I've made an image of how I want it but then better explained. s7.postimage.org/h342d0qhn/layout2.png – Steeplejack

Displaying INLINE actually filling/filing up elements, left to right like text. – Disrepute

Answer 4

Update div id foto css

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

background: #FC0; }

Statecraft

Answer 5

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%;
    }
}

Maximilian