Cómo ajustar divs al margen correctamente

maximusk10 · 8 Abr 2014

Saludos amigos, esta vez vengo con una duda que me surgió hace poco, siempre he diseñado mis layouts en psd y pasarlos a css y html es un caos para mi xD, pero hasta el momento nunca habia tenido inconvenientes, hasta ahora...

Resulta que a la hora de crear algun div, y le pongo 100%, el div no me llega al 100% de la pagina siempre queda algun "margin" sin siquiera yo haberlo puesto.

cuando yo quiero que quede asi, sin espacios o margins

aqui los códigos: (disculpen lo burdo de mis ejemplos)

HTML:

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" href="estilo.css">
</head>
<header id="header"> cabecera </header>

<section id="contenido"> 
	<article> caja1 </article> 
	<article> caja2 </article>
    <article> caja3 </article>
    <article> caja4 </article>
</section>



<body>
</body>
</html>

Insertar CODE, HTML o PHP:

@charset "utf-8";
/* CSS Document */

body {
	background: #48870a;	
}


#header {
	width: 100%;
	height: 70px;
	background: #5cc2b0;
		margin: none;
	
}

#contenido {
  width: 80%;
  background: white;
  margin: 0 auto;
}

article {
	width: 20%;
	height: 150px;
	background: orange;
	margin: none;
	display:inline-block;	
}

Saludos amigos, espero me puedan ayudar, si necesitan algun detalle anexo, solo pedidmelo

Galbatorix · 8 Abr 2014

Agrega margin:0; a body en tu css. Mira: Edit fiddle - JSFiddle

arkam · 8 Abr 2014

Insertar CODE, HTML o PHP:

 @charset "utf-8";
/* CSS Document */

body {
	background: #48870a;
    margin:0px
}


#header {
	width: 100%;
	height: 70px;
	background: #5cc2b0;
		margin: none;
	
}

#contenido {
  width: 80%;
  background: white;
  margin: 0 auto;
}

article {
	width: 20%;
	height: 150px;
	background: orange;
	margin-left: -4px;
	display:inline-block;	
}

trata moviendo article y body article a margin-left:-4 y body margin:0px igual revisa como se ve en explorer y firefox que hay variaciones por algunos pixeles XD

maximusk10 · 8 Abr 2014

perdon, este ejemplo lo saqué de mi web y en mi web si tengo el margin 0 en el body y aun así me da ese problema... intentare lo que me dice [MENTION=45952]arkam[/MENTION] aunque no me gusta mucho trabajar con valores negativos, ya que me generan problemas. Lo hago y comento

PD: Gracias por sus sugerencias

arkam · 9 Abr 2014

la otra opción es activar el float:left por ejemplo en esos articles y pues darle unos 150 pixeles de alto a contenedor para mantener el cuadro blanco.
o también float:left en los articulos y el section y al section con margin darle un 10% de cada lado (al ser 80% de ancho, el 20% restante lo mantendrá centrado)

lombervid · 9 Abr 2014

Con el margin: 0; que te dijeron en el body debe de quedar, solo que, has notado que tus elementos los tienes entre el head y el body, y no dentro del body? :witless:

maximusk10 · 9 Abr 2014

jaja si me acabo de dar cuenta [MENTION=8317]lombervid[/MENTION], pero en todo caso en mi codigo original está bien.

Ya lo hice funcionar! El problema era que en el body tenía otro margin que no dejaba que el margin 0 hiciera efecto.

Muchas gracias a quienes me ayudaron, quizás la duda era muy boba, pero nunca me había tocado hacer un diseño que tuviera todo sin margin

Saludos amigos y gracias!

EDITO

Insertar CODE, HTML o PHP:

Y en el caso de las cajas 1,2,3 y 4, bastó simplemente con colocarles un float a la izquierda y por fin no más problema.

Ocurre que usando float tengo muchos problemas, no puedo hacer un buen diseño responsive usando floats, por lo que me gusaría saber si alguien tiene una solucion sin usar floats. Ya me está pasando la cuenta XD

arkam · 9 Abr 2014

jeje la otra opción es usando un margin negativo XD, ¿como se ve ahora? igual sube el código con los progresos de nuevo para ver si se nos prende el foco.

¿ya le intentaste asi?:

Insertar CODE, HTML o PHP:

@charset "utf-8";
/* CSS Document */

body {
	background: #48870a;	
	margin: 0;
}


#header {
	width: 100%;
	height: 70px;
	background: #5cc2b0;
		margin: none;
	
}

#contenido {
  width: 80%;
  background: white;
  margin: 0 auto;
  float: left;
  margin-left: 10%;
}

article {
	width: 20%;
	height: 150px;
	background: orange;
	float: left;
	display:inline-block;	
}

andree1 · 9 Abr 2014

Siempre hay un margin hacia el cuerpo de la página, por lo que debería estar:

body {margin:0px}

Cómo ajustar divs al margen correctamente

maximusk10 Seguir

Adjuntos

Galbatorix

arkam

maximusk10

arkam

lombervid

maximusk10

arkam

andree1