Foros del Web » Creando para Internet » CSS »

Centrar dos divs con margenes en un div ?

Estas en el tema de Centrar dos divs con margenes en un div ? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/12/2013, 13:53
Avatar de Sumerio  
Fecha de Ingreso: octubre-2009
Mensajes: 195
Antigüedad: 15 años, 1 mes
Puntos: 6
Pregunta Centrar dos divs con margenes en un div ?

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:

Código:
<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>
Código HTML:
<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.
  #2 (permalink)  
Antiguo 17/12/2013, 16:02
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años, 6 meses
Puntos: 31
Respuesta: Centrar dos divs con margenes en un div ?

Es un problema de matemáticas. width: 100%, si no hay nada que haga que cambie en elementos padres, correspondera al ancho del navegador, y seguramente el de la pantalla.

Cita:
(46%*ancho+10px+10px)*2 =< ancho
El =< es un "menor o igual"

Si el resultado es menor o igual no hay problema, pero si es mayor pasa eso.
  #3 (permalink)  
Antiguo 17/12/2013, 16:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Centrar dos divs con margenes en un div ?

A la suma de alzacon le faltaría además sumar ese borde que pones, que son 12 pixeles más en total por fila. Realmente solucionarías todo con:

Código CSS:
Ver original
  1. .inner-panel {
  2.   float: left;
  3.   width: calc(50% - 20px);
  4.   box-sizing: border-box;
  5.   margin: 5px 10px;
  6.   border: 3px solid #5C9CCC;
  7. }
  #4 (permalink)  
Antiguo 17/12/2013, 17:47
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años, 6 meses
Puntos: 31
Respuesta: Centrar dos divs con margenes en un div ?

Cita:
Iniciado por pzin Ver Mensaje
A la suma de alzacon le faltaría además sumar ese borde que pones, que son 12 pixeles más en total por fila.
Pues es verdad, el complicado modelo de caja estandar. Y otra vez con las propiedades que necesitan prefijos, como box-sizing en firefox.
  #5 (permalink)  
Antiguo 18/12/2013, 02:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Centrar dos divs con margenes en un div ?

Cita:
Iniciado por alzacon Ver Mensaje
Pues es verdad, el complicado modelo de caja estandar.


Y a mi me llamaban loco cuando decía que el modelo de caja del antiguo IE (<7) era más correcto, y ahora resulta que todos usamos box-sizing: border-box, que debe de ser un alias de imitate-former-ie-box-model: true.

Etiquetas: divs, imagenes, margenes, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:31.