If you remove the width of any of the classes .container or .containerNome this undesired effect of strapolar div pai will disappear:
.containerNome{
height: 23px;
border: 1px rgb(0, 0, 0) solid;
background: rgb(0, 0, 255);
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-box-shadow: inset 3px 3px 0px 0px rgba(0, 0, 0, 0.22);
-webkit-box-shadow: inset 3px 3px 0px 0px rgba(0, 0, 0, 0.22);
box-shadow: inset 3px 3px 0px 0px rgba(0, 0, 0, 0.22);
}
.container{
width: 97px;
height: 112px;
border: 1px rgb(0, 0, 0) solid;
background: rgb(255, 255, 153);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
<div class="container" style="float: left; margin-left: 5px; margin-bottom: 5px;">
<div class="containerNome"></div>
</div>
This is why this is happening. In this example we have 2 Ivs, a div pai and the div filho whose the width is equal for both classes, which in this case is width:97px;
.containerNome{
width: 97px;
}
.container{
width: 97px;
}
So far so good, this estrapolar effect will not be visible as you can see here in this example . But when we add the edge, that’s where this unwanted effect appears.
.containerNome{
width: 97px;
border: 1px rgb(0, 0, 0) solid;
}
.container{
width: 97px;
border: 1px rgb(0, 0, 0) solid;
}
What happens - The div .container for being a div filho and be inside the div pai it will respect this and will start to be rendered from where the edge ends (left) and where the main area of the div pai (which is the yellow area). So when we give a border: 1px rgb(0, 0, 0) solid; à div filho we are adding 2 more pixels of width to it, because by adding this border we are adding 2 pixels in the border-left:1px; and border-right:1px;. What will give a total of no 97px but rather of 99px full width of this div. To compensate for these 2 additional pixels, we would have to remove them from the width who would stay - width:95px;. Example in jsFiddle
.containerNome{
width: 95px; /* Foram removidos 2px para compensar o aumento dos 2px adicionais da borda abaixo */
border: 1px rgb(0, 0, 0) solid; /* Isto adiciona uma borda de 1px do lado esquerdo, topo, direito, e em baixo */
}
The higher the edge, the more we have to reduce the value of the width so that it has in total 97px width (including the edge):
border: 2px #000 solid; => width:93px; /* 93px + 4px = 97px */
border: 3px #000 solid; => width:91px; /* 91px + 6px = 97px */
border: 4px #000 solid; => width:89px; /* 89px + 8px = 97px */
/* E por aí em diante... */
By removing the width - width this will become auto as she is by default, so what happens:
By removing the width:97px; class .containerNome this class will calculate the width of div pai and complete the entire div pai to 100% (this already included and calculated along with edges, paddings or margins).
By removing the width:97px; class .container this will become responsive by adjusting its value width depending on the size of the content within it which in this case is a div with width:97px;
Attention that the width by default to 100% will not be the same thing as
width:100%;. To width pattern auto will delete edges, padding and
while the width:100%; will force the content itself, which
means that the edges, paddings etc will stay out of the div making it bigger
than the div pai.
I don’t know if I got it right, overlap like that? showing that yellow border around the blue div?
– Chun
If you look at my example, you notice that the
divfrom inside this really inside, and it even extrapolates todivfather on the right side, I would like it to fit perfectly, respecting the edges, as if they were two separate elements, but with the samewidth– MarceloBoni