About evenly divs inside another div

[tirengarfio]

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

[Paulie_D]

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.

[Author]

Posts