Grow your CSS skills. Land your dream job.

About evenly divs inside another div

  • # May 2, 2013 at 12:54 pm

    Hi,

    I want to get evenly divs inside another div. I have this code:

    fsdaa

    fsdaa

    .container {
    background: red;
    width: 500px;
    height: 200px;
    }
    .contained {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 45%;
    margin: 2.5%;
    float: left;
    padding: 10px;
    }
    .one {
    background: blue;
    }
    .two{
    background: green;
    }

    http://jsfiddle.net/krvyJ/15/

    It seems it works ok, but my question is: in that way I have now, when I resize the side margins of the contained divs, I have to change also the width of those divs. For me this is a bit stupid, because I think changing the margins should be enough, because after changing the margin, the divs should adapt its width automatically (that’s my idea).

    Do you understand me? Am I doing something wrong to get those evenly divs or my approach is correct?

    Javi

    # May 2, 2013 at 2:15 pm

    Try this: http://codepen.io/Paulie-D/pen/eAElz

    Thing is…you have three ‘gaps’ with two divs (left, middle & right).So whatever remainder you have left after totalling the width of the divs has to be divided accordingly.

    So we remove the left margin from the right div and there you go.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".