Cuando minimizo la web el buscador se mueve de posicion, tengo algo mal en el css?

[RGT]

Hola, estoy haciendo una web y agregue el buscador en el header, justo arriba del menu pero, cuando minimizo la web, el buscador se mueve mas a la izquierda.
No se porque pasa esto, a ver si pueden ayudarme, aqui unas fotos:

Normal:
http://oi44.tinypic.com/ruz0xu.jpg

Minimizado:
http://oi42.tinypic.com/2e1r7m9.jpg

Aqui el css que tengo:

Código:

.search2{
position:absolute;
top:30px;
right:351px;
}
.buscador-icon{
background:url("images/buscador.png") no-repeat;
width:48px;
height:48px;
float:left;
}
.search2 ul{
	list-style:none;
	width:238px;
	height:32px;
	padding:4px 4px 0 4px;
	background:url("images/search.png") no-repeat;
	float:right;
	margin-top:6px;
	margin-left:5px;
}
.search2 ul li{
	float:left;
}
.search2 ul li input.txtfield{
	float:left;
	width:180px;
	height:28px;
	line-height:28px;
	padding:0px 10px 0px 10px;
	font-size:12px;
	color:#798e94;
	background:transparent;
	border:none;
}
.search2 ul li input.go{
	float:right;
	width:32px;
	height:28px;
	border:#FFF solid 1px;
	border-radius:0px 2px 2px 0px;
	background-image:url("images/mag.png");
	background-repeat:no-repeat;
	background-position:center center;
	cursor:pointer;
	background-color:#4C4948;
}

Aqui el codigo para el buscador:

Código PHP:

      <div class="search2"><div class="buscador-icon"></div> 
            <ul> 
                <form action="" method="post" id="searchform"> 
             <li> 
                <input type="text" value="Qué Disco Buscas?" name="s" id="s" onblur="if(this.value == '') { this.value = 'Qué Disco Buscas?'; }" onfocus="if(this.value == 'Qué Disco Buscas?') { this.value = ''; }" class="txtfield" /> 
            </li> 
            <li style="float:right;"><input type="submit" class="go" value="" /></li> 
                </form> 
            </ul> 
    </div>  
   

Que tengo mal amigos?, espero su ayuda.

[C2am]

Hola
Supongo que tendrá que ver con la position:absolute y que el padre de dicho div no estará posicionado con relative, absolute, o fixed. Pero como no muestras todo el código, solo estoy jugando al adivino.

Solución: depende del contexto en el que tienes ese div.
Saludos

[emprear]

Es cierto, que como ha dicho @C2am, falta código que ponga dentro de un contexto al div. Una situación, que se repite en numerosos post de este foro.
A la espera de este, quisiera dejar un comentario al margen.

Me gustaría saber por que algunos otros usuarios consideran tan grave este hecho (más aún si consideramos los "reverendos disparates", que a veces se ven expresados en FDW), como para hacer valoraciones negativas.
No sé, a lo mejor se me escapa algo, sería bueno que las justifiquen, en una de esas, hasta estoy de acuerdo.

Saludos

[RGT]

Aqui les pongo todo el codigo del header:
http://oi44.tinypic.com/1zlahpu.jpg

Aqui el css:

Código:

.wrapper {
width: 980px;
margin: 0 auto;
}

/* LOGO */

#top-header{
background-image: url("dark/header.jpg");
background-repeat: no-repeat;
}
#logo {
padding-left:0;
width:auto;
background-image: url("dark/logo.png");
background-repeat: no-repeat;
background-position: left center;
display:block;
float:left;
margin-top:20px;
height:91px;
}

#logo a{
width:284px;
display:block;
line-height:100px;
text-indent:-5000px;
}

/* MENU */

#mainmenu {
position:relative;
top:97px;
margin-right:11px;
}

#mainmenu ul li {
float: right;
width:auto;
margin: 0;
background:url("dark/bg_menu_tab_right.gif") no-repeat right top;
margin-right:-1px;
}

#mainmenu ul li a{
display: block;
background: url("dark/bg_menu_tab_left.gif") no-repeat left top;
font-weight:bold;
width:auto;
color:#fff;
padding: 9px 15px;
}

#mainmenu ul li.current_page_item, #mainmenu ul li.current-cat {
text-decoration: none;
background: #fff url("dark/bg_menu_tab_right_current.gif") no-repeat right top;
}

#mainmenu ul li.current_page_item a, #mainmenu ul li.current-cat a{
text-decoration: none;
background: url("dark/bg_menu_tab_left_current.gif") no-repeat;
color:#333;
}

/* BUSCADOR */

.search2{
position:relative;
top:30px;
float:right;
}
.buscador-icon{
background:url("images/buscador.png") no-repeat;
width:48px;
height:48px;
float:left;
}
.search2 ul{
list-style:none;
width:238px;
height:32px;
padding:4px 4px 0 4px;
background:url("images/search.png") no-repeat;
float:right;
margin-top:6px;
margin-left:5px;
}
.search2 ul li{
float:left;
}
.search2 ul li input.txtfield{
float:left;
width:180px;
height:28px;
line-height:28px;
padding:0px 10px 0px 10px;
font-size:12px;
color:#798e94;
background:transparent;
border:none;
}
.search2 ul li input.go{
float:right;
width:32px;
height:28px;
border:#FFF solid 1px;
border-radius:0px 2px 2px 0px;
background-image:url("images/mag.png");
background-repeat:no-repeat;
background-position:center center;
cursor:pointer;
background-color:#4C4948;
}

Hay esta todo, espero que me ayuden amigos!.

[referenteweb]

Agrégale a tu #wrapper{ position: relative; }

Saludos

[RGT]

Tengo:

.wrapper {
width: 980px;
margin: 0 auto;
position: relative;
}

Y

position: absolute;
top:30px;
right:10px;

Y esta bien =)

solo para confirmar, asi esta correcto verdad?.

[referenteweb]

Claro, lo que pasa es que el contenedor #wrapper se encarga de envolver todos tus elementos HTML, y en este caso se centra automáticamente, si no le indicas que una position: relative se tomara la etiqueta body como base.

Ese ese el único incoveniente con las posiciones absolutas, pero no deberías tener problemas, asi que prueba a ver que tal te va.

Saludos

[RGT]

Funciono todo perfecto, gracias hermano, muchisimas gracias!.