CSS border conflita com width em porcentagem

[Giovanni D'Angelo 0]

Boa noite!

 

Bom, meu problema é simples, porém muito complicado pra resolver. Pelo menos foi o que eu achei.

 

Fiz um layout em div e css e as width em porcentagem para que possa ser vista na maioria das resoluções de tela, mas surgiu um problema.

 

Tenho 3 div compartilhando o mesmo espaço, uma à esquerda, uma ao centro e outra à direita.

A div do centro preciso ter borda dos lado e embaixo, tranquilo.

No entanto, esse 2px a mais (1px de borda de cada lado) atrapalha o encaixe das div.

 

Ou eu diminuo 1% do width (que dá uma diferença grande) ou elas não encaixam.

 

Tem como colocar a borda da div pra dentro ao invés de colocar pra fora?

Sei lá, me ajudem aí!

eu mesmo acabei resolvendo.

achei isso em um site gringo, pode ser que ajudem outras pessoas.

 

código original:

 

#esquerda {
	border: none;
	width: 15%;
	float: left;
	margin: 0 auto;
	display: block;
}

#meio {
	border: #999 solid 1px;
	border-top: none;
	float: left;
	margin: 0 auto;
	width: 70%;
	display: block;
	overflow: hidden;	
}

#direita {
	border: none;
	background: #000;
	width: 15%;
	height: 300px;
	display: block;
	float: left;
	margin: 0 auto;
}

e corrigido:

 

#esquerda {
	border: none;
	width: 15%;
	float: left;
	margin: 0 auto;
	display: block;
}

#meio {
	border: #999 solid 1px;
	border-top: none;
	float: left;
	margin: 0 auto;
	width: 70%;
	display: block;
	overflow: hidden;
	
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#direita {
	border: none;
	background: #000;
	width: 15%;
	height: 300px;
	display: block;
	float: left;
	margin: 0 auto;
}

[Bru_ce 53]

Ou você flutua o elemento para a esquerda, ou você deixa ele centralizado.

Você consegue estar na faculdade e no trampo ao mesmo tempo ? kkk

 

 

#esquerda {
border: none;
width: 15%;
float: left;
margin: 0 auto;
display: block;
}