CODEWITHSUNDEEP
htmlcss
Haider
Haider

Reputation: 28

Div same surrounding margin

I want the div's inside the container to be at equal distance.

Check the fiddle I have created in it there is a main container with two divs inside it. How can I have it like the margin between the image div's and margin on right and left of the div's be same?

http://jsfiddle.net/5b73gew0/

<div id="main">
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
</div>

#main{
    width: 100%;
}
.image{
    float: left;
    margin: auto;
}

Update: As you all have commented out that its unclear what Im trying to achieve, so here is a bit more explanation: 

[margin] image-div-1 [margin] image-div-2 [margin]

I want margin to be same, so the 2 div's will be centered aligned in the main div, but will also have an equal margin in between them too.

Margin: You can also say it as Spacing

Upvotes: 0

Views: 75

Answers (3)

Jan_dh
Jan_dh

Reputation: 771

I made a fiddle to get what you want : http://jsfiddle.net/h9g44Ldx/

#main{
width: 100%;
}
.image{
float: left;
margin: auto 5%;
width:40%;
}
.first
{
 margin-right:0;
}
img{
 margin: auto 0;
 width:46px;
}

Upvotes: 0

Simply Craig
Simply Craig

Reputation: 1114

So what you need to go is get all the imgs widths together imgWidth then find the window width windowWidth then determine the margin dMargin which is windowWidth - imgWidth divided by the number of imgs + 1

(for 2 elements there is 3 white spaces 1 to the left of the first img 1 inbetween them and 1 to the right) as so: [margin] image1 [margin] image2 [margin]

Then you need to apply that full margin to only the left of the first img and the right of the second image and then only half of dMargin to the rest (because the right of img1 and left of img2 need to be half of the dMargin so that together it is the full dMargin).

Which will effectively evenly distribute all elements as shown here:

Code Snippet:

function determineMargin() {
    var imgs = $(".image > img");
    var imgWidth = 0;

    for (var i = 0; i < imgs.length; i++) {
        imgWidth += imgs[i].width;
    }

    //Now that we know the spacing the images take up, lets find out the window width

    var windowWidth = $(window).width();

    var dMargin = (windowWidth - imgWidth) / (imgs.length + 1);

    for (i = 0; i < imgs.length; i++) {
        var tempDMargin = dMargin + imgs[i].width / 2;
        if (i == 0) {
            imgs[i].style.marginLeft = dMargin + "px";
            imgs[i].style.marginRight = dMargin / 2 + "px";
        } else if (i == imgs.length) {
            imgs[i].style.marginLeft = dMargin / 2 + "px";
            imgs[i].style.marginRight = dMargin + "px";
        } else {
            imgs[i].style.marginLeft = dMargin / 2 + "px";
            imgs[i].style.marginRight = dMargin / 2 + "px";
        }
    }
}

determineMargin();

$(window).resize(function () {
    determineMargin();
});
#main {
    width: 100%;
}
.image {
    float:left;
}
body {
    margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
    <div class="image">
        <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
    </div>
</div>

or Working JSFiddle: http://jsfiddle.net/xzrn7n6p/1/

Upvotes: 1

klarki
klarki

Reputation: 915

You mean something like this: http://jsfiddle.net/5b73gew0/

No matter how many divs, there will always be a constant margin between them, to the right and to the left.

#main{
    width: 100%;
}
.image{
    float: left;
    margin-left: 10px;
}
.last {
    margin-right: 10px;
}

and the last div needs to get:

<div class="image last">
    <img src="https://lh4.googleusercontent.com/-ptcuEsGVB4I/AAAAAAAAAAI/AAAAAAAABQM/WKCwt2vYBko/s46-c-k-no/photo.jpg" />
</div>

Upvotes: 1

Related Questions