Ayuda con Div

[LinkLooker]

Saludos. En mi proceso de aprendizaje de Css me he topado con este problemilla que le he dado mil veces y no logro solucionar. Aqui en asunto:

Tengo un DIV (#header) donde he colocado una imagen:
<div id="header"><img src="header.png"></div>
y dentro de ese DIV quiero meter otro DIV (#buscador) en el cual quiero colocar un buscador y que este ubicado en la parte superior derecha del DIV header.

<div id="header"><div id="buscador"></div></div>

el asunto es que no logro cuadrarlo usando Float y position. Esta es la parte que mas me cuesta de CSS.

Mi Css esta asi:

#header {
width:100%;
height:115px;
padding:0px;
margin:0px;
position: absolute;}

#buscador {position:absolute; float:right;}

No se colo lograr que el #buscador se posicione en la parte superior derecha de #header.

He cambiado las posiciones una y otra vez y nada....

Gracias por la ayuda que puedan brindar..

Nota: Usando en #header la propiedad background-image si logro colocarlo. Pero me interesa invocarlo como imagen y no como fondo para poder usar: #header img {width: 100%;height: 115px;} de modo que la imagen se estire en caso de que algunos usuarios usen una resolucion mayor a 1024*768, como por ejemplo 1360*768

[zerokilled]

no puedes usar float y posición absoluta a la misma vez ya que este último tiene mayor prioridad. puedes hacerlo de dos formas: utiliza solo float:right; o posición absoluta con coordenadas top y right.

[LinkLooker]

Saludos, he puesto asi:

#header2 { width:100%; height:100%; padding:0px; margin:0px; position: absolute;}

#buscador { position:relative; float: right;}

y se ve como quiero, ahora pasa que el contenido se me ha subido y me solapa el div header...

[LinkLooker]

Saludos he cerrado el div header asi:

<div id="header"><div id="buscador"></div></div>
y el css:
#header { width:100%; height:100%; padding:0px; margin:0px; position: absolute;}
#buscador { position:relative; float: right;}

y se ve bien, ahora el asunto es que el contenido se ha subido y me solapa al div header..

Ostias!!!! A ver com le hago..

Gracias por responder

[Carlangueitor]

Quita la posición absoluta, no la necesitas.

Saludos

[XxflezhaxX]

Iniciado por LinkLooker

<div id="header"><div id="buscador"></div></div>

es "header2" no?????

buscador esta dentro de header, por que no los individualizas y les das CSS invidualmente a cada uno.

Código HTML:

<div id="header"></div><div id="buscador"></div>
 

[LinkLooker]

Gracias por responder!!!

Ok. Al quitarle la posición absoluta a #header2 se baja #buscador. Y queda header2 arriba y BUscador debajo de este. Al ponerle la posición absoluta se sube #buscador ubicandose donde quiero, pero a su vez se sube el contenido que esta en debajo de este y se descuadra el diseño.

Seguiré intentando.....Gracias por las respuestas..


Y si los tengo individualizados.

[pabsantor]

mejor comprate una plantilla nueva en www.goodadyy.com y te compras un hosting o bien en www.1and-1.info y ahi te dan lo mismo y aparte de dan 50 dolares en vauchers para que promociones tu web en google adwords

[minkweb]

Colocales a ambos posicion absolute y cuadralos mediante margin-top y margin-left, no te compliques, asi te funcionara, saludos!

[XxflezhaxX]

ya te respondi y al parecer no corregiste.
al quitare propiedades como position absoluta, se la estas quitando a ambos ya que buscador es hijo de header2, por que este ID esta dentro del ID header2, ya que te dije como las indiviluarizadas y acomodaras la posicion de ambas independientemente.

saludos!!

edito: puedes ver lo que te digo con unos ejemplos super sencillisimos que te dejo aqui.
http://www.html09.freeiz.com/divs

saludos!!

[Facundo72]

Hola

No utilices posiciones absolutas si no las necesitas y por la imagen como fondo de la cabecera:

#header {
background:url(header.png);
width:100%;
height:115px;
padding:0px;
margin:0px;
}

#buscador{
float:right;
}

Si acaso no pones la imagen como fondo:

#buscador{
position:absolute;
right:0;
z-index:999;
}