Se removeres a width
de qualquer uma das classes .container
ou .containerNome
esse efeito indesejado de estrapolar a div pai
irá desaparecer:
.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>
Eis o porquê disto acontecer. Neste exemplo temos 2 divs, a div pai
e a div filho
cujo a width
é igual para ambas as classes, que neste caso é de width:97px;
.containerNome{
width: 97px;
}
.container{
width: 97px;
}
Até aqui tudo bem, este efeito de estrapolar não irá ser visível como se pode ver aqui neste exemplo . Mas quando adicionamos a borda, aí é que este efeito indesejado aparece.
.containerNome{
width: 97px;
border: 1px rgb(0, 0, 0) solid;
}
.container{
width: 97px;
border: 1px rgb(0, 0, 0) solid;
}
O que é que acontece - A div .container
por ser uma div filho
e estar dentro da div pai
ela vai respeitar esta e vai começar a ser renderizada a partir de onde acaba a borda (esquerda) e onde começa a área principal da div pai
(que é a área amarela). Então ao darmos uma border: 1px rgb(0, 0, 0) solid;
à div filho
estamos a acrescentar mais 2 pixels de largura a ela, pois ao adicionar essa borda estamos a adicionar 2 pixeis na border-left:1px;
e border-right:1px;
. O que dará um total de não 97px
mas sim de 99px
de largura total desta div
. Para compensar estes 2 pixeis adicionais, teriamos que removê-los da width
que ficaria - width:95px;
. Exemplo no 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 */
}
Quanto maior a borda for, mais teremos que reduzir no valor da width
para que esta tenha no total 97px
de largura (incluindo a borda):
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... */
Ao removermos a largura - width
esta vai se tornar auto
como ela é por padrão, então o que acontece:
Ao removermos a width:97px;
da class .containerNome
esta class vai calcular a width
da div pai
e preencher por completo toda a div pai
a 100%
(isto já incluído e calculado juntamente com bordas, paddings ou margens).
Ao removermos a width:97px;
da class .container
esta vai tornar-se responsiva ajustando o seu valor width
dependendo do tamanho do conteúdo dentro dela que neste caso é uma div com width:97px;
Atenção que a width
por padrão a 100%
não será a mesma coisa que
width:100%;
. A width
padrão auto
vai excluir bordas, padding e
margins, enquanto a width:100%;
irá forçar o conteúdo em si, que
significa que as bordas, paddings etc vão ficar fora da div
tornando-a maior
do que a div pai
.
div
de dentro esta realmente dentro, e ela ate extrapola adiv
pai do lado direito, eu gostaria que ela se encaixasse perfeitamente, respeitando as bordas, como se fossem dois elementos separados, mas com o mesmowidth