CSS - Centrar dos divs con margenes en un div ?

   
Vista:

Centrar dos divs con margenes en un div ?

Publicado por Hernando (1 intervención) el 17/12/2013 21:00:53
Hola a la comunidad, soy un poco nuevo en el tema de maquetacion, resulta que un div padre, donde va contener dos divs hijos por fila, osea es como cada div tenga el mismo tamaño con un espacio margen, lo logre hacerlo de alguna forma, pero cuando lo pruebo con otra pantalla de otra dimension, no funciona del todo bien, porque aparece solo un div por fila (mas corta la pantalla del monitor).
Les muestro mi codigo css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style type="text/css">
	.inner-panel {
		width: 46%;
		margin: 5px 10px 5px 10px;
		border: 3px solid #5C9CCC;
		display: inline-block;
	}
	.outer {
		width: 100%;
		text-align: center;
	}
	.inner {
		width: 76%;
		margin: 0 auto;
		text-align: center;
	}
	.inner-blank {
		width: 12%;
		margin: 0 auto;
		text-align: center;
	}
</style>
 
<div class="outer">
	<div class="inner-panel">
		codigo
	</div>
	<div class="inner-panel">
		codigo
	</div>
	<div class="inner-panel">
		codigo
	</div>
	<div class="inner-panel">
		codigo
	</div>
</div>



Si le muestro en otra pantalla, me sale este problema:



Alguien podria orientarme a solucionar este problema.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Centrar dos divs con margenes en un div ?

Publicado por xve (352 intervenciones) el 17/12/2013 21:14:18
Hola Hernando, lo he probado, y el problema lo tienes en los margenes, que al no caber, salta de fila... si comentas la linea:
1
/*         margin: 5px 10px 5px 10px; */
veras como si que te caben...

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Centrar dos divs con margenes en un div ?

Publicado por Jose maria (8 intervenciones) el 17/12/2013 22:48:26
Les entiendo, y supone muchos quebraderos de cabeza entender que 46% más 46% mas padding 10px (que por 4 ya que son dos lados por cada div son 40px, más border ... y todo ello superan o no el 100%. nos provoquen el salto de línea. En página de escritorio posiblemente bien pero en tablet o en smartphone ... ???

Metido como estoy en Responsive Web Design puedo decirles que la propiedad box-sizing: border-box; (CSS3) insertada de forma genérica o en el id/class afectado hace que padding y border quede dentro del ancho/alto del id/class asignado y mandamos las matemáticas a paseo ... por un rato.
Si (condicional, de forma genérica):
1
2
3
4
5
6
7
8
9
10
*{
  -moz-box-sizing: border-box;  // para Firebox
  box-sizing: border-box;
}
	.inner-panel {
		width: 46%;
		padding: 5px 10px 5px 10px;
		border: 3px solid #5C9CCC;
		display: inline-block;
	}

.inner-panel mantendrá el ancho del 46% sin importar el borde o el marco asignado.
OJO: margin queda fuera del grupo y suma espacio. box-sizing: border-box; solo aglutina padding y border ... que ya es mucho.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar