Como pongo un div con un ancho completo.

rogeliomx · #1 (**permalink**) 17/12/2010, 18:30

Hola a todos he buscado informacion y quisiera poner un div que ocupe todo el ancho de la pantalla, actualmente a pesar de poner la propiedad width:100%, me pone unos margenes a los lados y no los quiero,

Gracias de antemano.

maycolalvarez · #2 (**permalink**) 17/12/2010, 18:32

los div al ser capas de bloque siempre ocuparán todo el ancho, el problema es el margen del body:

Código CSS:

Ver originalbody{
    margin: 0px;
}

emprear · #3 (**permalink**) 17/12/2010, 18:38

Prueba con algo asi

Código CSS:

Ver originaldiv#ns {
position: fixed;
width: 100%;
height:100%;
top:0px;
left:0px;
background-color: #000;
color: #FFF;
text-align: center;
z-index: 999;
overflow:hidden;
filter:alpha(opacity=95);
-moz-opacity:0.95;
-khtml-opacity:0.95;
opacity: 0.95;
font-size: 1.1em;
}

en realidad basta con

position: fixed;
width: 100%;
height:100%;
top:0px;
left:0px;

el resto es para darle un poco de efecto (ya lo tenia hecho asi...)

Saludos

JavierB · #4 (**permalink**) 18/12/2010, 06:41

Hola rogeliomx

Muevo tu tema al foro de CSS desde Web general.

Saludos,

kseso? · #5 (**permalink**) 18/12/2010, 08:12

Una forma ya se la indicó maycolalvarez

Pero sería mejor (en términos de efectividad y universalidad) que utilice algún reset css. Desde el más sencillo aplicado al * (selector universal), el simple reset de Russ Weakley, o los más completos y extensos, como el de Eric Meyer, Thierry Koblentz, etc. O puede optar por los más recientes que incluyen las etiquetas de html5 (Rich Clark y su html5Reset, Jeffrey King con su CSS Reset – Refreshed o el de Paul Irish con HTML5 Boilerplate)

A ver si después tengo un momento y busco el enlace a un artículo reciente sobre el tema (en inglés). Creo que apareció en sixrevisions.com

Portgaz · #6 (**permalink**) 18/12/2010, 20:27

yo prefiero ponerte un codigo simple y sencillo y que lo estudies, veras que lo comprenderas muy facil.
En lugar de andar presumiendo y deciendo los nombres de personas que crearon tales metodos.

Código HTML:

Ver original<html>
<head><title> div 100% ancho </title>
<style type="text/css">
 
body {
margin: 0px;
}
 
#ancho {
background-color: #ff9900;
width: 100%;
height: 80px;
}
 
</style>
</head>
 
<body>
<div id="ancho"></div>
</body>
</html>

LA PARTE INTERESANTES ES:

Código CSS:

Ver original#body {
margin: 0px;
}