ajustar el ancho de un div a el tamaño del navegador

[Montes28]

hola amigos necesito que un div se ubique en la parte superiror de la pagina como el de facebook

hasta el momento logro que se ubique en la parte superior del navegador pero a los lados veo unos espacios en blanco

#banner{
position:relative;
width: 100%;
margin: 0;
padding: 0;
margin-top:-10px;
background-color:#017AB3;
height:82px;
}

<div id="banner"></div>


que estoy haciendo mal?
que debo de hacer?

[garciasanchezdani]

Hola Montes28, prueba añadiendo position:absolute y top:0

Código CSS:

#banner{
position:absolute; 
top:0px;
width: 100%;
margin: 0;
padding: 0;
margin-top:-10px;
background-color:#017AB3;
height:82px;
}
 

Saludos, Daniel

[webseficientes]

En esta parte

Código HTML:

position:relative;

Te condiciona el ancho al 100% restante de lo que tenes al lado

podes usar

Código HTML:

clear:both
width:100%

y no poner el position:relative

[Montes28]

garciasanchezdani y webseficientes gracias por responder


este es mi codigo pero me queda un pequeño espacio en blanco al lado derecho como lo puedo quitar

Código CSS:

#banner{
position:absolute; 
top:0px;
width: 100%;
margin-top:-10px;
margin-left:-8px;
margin-right:-20px;
background-color:#017AB3;
height:82px;
}
 

hice lo que me recomendo webseficientes

pero continua con el espacio en blanco al lado derecho , necesito que ocupe todo el ancho del navegador

Código CSS:

#banner{
 
clear:both
width: 100%;
margin-top:-50px;
margin-left:-8px;
margin-right:-20px;
background-color:#017AB3;
height:82px;
}
 

[garciasanchezdani]

Hola!! Prueba a quitar los margin-left y margin-right

Código CSS:

#banner{
position:absolute; 
top:0px;
width: 100%;
margin-top:-10px;
background-color:#017AB3;
height:82px;
}
 

[Montes28]

hola garciasanchezdani ya probe tu codigo pero me aparece un espacio en la derecha y otro en la izquierda , necesito que el baner cubra todo el ancho del navegador



#banner{
position:absolute;
top:0px;
width: 100%;
margin-top:-10px;
background-color:#017AB3;
height:82px;
}

[garciasanchezdani]

Entonces tendrás otro elemento superior que contiene a #banner...

[villano4]

tienes puesto el html y el body sin margenes y sin padding?

html, body{
width:100%;
margin:0;
padding:0;
}

[Montes28]

garciasanchezdani

#banner es el superior nadie lo contiene , necesito que el banner sea como el de foros del web como el banner de este post

gracias por responder

[FernandoSP]

No le coloques nada de margin-top:-10px; ni posicion, un saludo.

[gmonterog]

Hola:

Te recomiendo que uses un reseter del CSS para que no te ocurran estas cosas.

Busca en Google reseter CSS y encontrarás toda la información necesaria.

Saludos,

GMG