[SOLUCIONADO] Emular margins laterales con un solo div

quico5 · #1 (**permalink**) 09/12/2016, 08:55

Lo que estoy intentando con flex es emular "margin:auto;" pero usando un único DIV y que este ocupe todo el ancho con un color de fondo, y aprecio un margen de error que no consigo dominar

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div.b{
			background:red;
			display:flex;
			justify-content:flex-start;
			align-items:stretch;
		}
		div.b:before{
			background:lime;
			content:"";
			width:calc((100% - 800px) / 2);
		}
		div.b:after{
			background:lime;
			content:"";
			width:calc((100% - 800px) / 2);
		}
	</style>
</head>
<body>
	<div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit dolor perspiciatis, nemo totam quis voluptatibus. Laudantium quos, nemo quis quo vitae, aperiam delectus tempore velit corporis enim accusamus ipsam consequatur!</div>
	<div style="background:lime;"><div style="width:800px;margin:auto;background:red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quia velit, eligendi incidunt nemo dolores quisquam cupiditate qui, facere facilis quae magni assumenda est voluptate autem laudantium sapiente voluptatibus amet.</div></div>
</body>
</html>

Rafael · #2 (**permalink**) 09/12/2016, 12:39

Hum. Yo le pondría un padding al contenedor padre.

quico5 · #3 (**permalink**) 09/12/2016, 14:54

Pues es más simple

, gracias por la sujerencia

Código:

padding:0 calc((100% - 800px) / 2);