Alinear busqueda fields y botones

[JessicaTJ]

Hola chicos, una vez mas vengo a pedir su ayuda ccs' sera jijijiji.

Estoy tratando de alinear unos campos de busqueda y un boton, mas o menos asi como en ebay:


Como ven el campo de busqueda, de filtros y el boton estan bien alineaditos, y por mas ke he kerido no he podido ke me keden asi, alguien podria plis hecharme una manita? El codigo ke tengo yo es algo asi:

Código HTML:

<div id="search">
    <form action="1.php" method="post">
      <input type="text" style="width:300px; border:1px solid #F00; height:20px; padding:3px 0; margin:4px 5px 4px 10px; vertical-align: middle;" />
      <select name="" class="grayfont" style="height:28px; padding:4px 2px;">
      <option selected="selected">Todas Las Categorias</option>
      <option value="1">Antiguedades</option>
      <option value="2">Arte</option>
      <option value="3">Bebes</option>
      <option value="4">Libros</option>
      <option value="5">Negocio e Industria</option>
    </select> 
    <a href=""><input type="submit" value="" class="christmas" /></a>
    </form>
</div>
 

Código CSS:

#search { background:url(../images/search_bg.jpg); height:35px; width:974px; margin:0 auto; padding:0 8px; }
.christmas { border:0; color:#FFF; height:28px; width:80px; background: url(../images/buscar.png); }
.christmas:hover { background-position: 0 -25px;}
 

Alguna alma caritativa ke pudiera ayudarme? Me estoy rompiendo la cabeza con eso XD

Mil gracias chicos !!!

[rodomiro]

Hola, lo que necesitas hacer es que los elementos "floten" dentro de la div, es decir se vallan poniendo uno al lado del otro.

Mira este LINK, que habla sobre lo que es el "FLOAT" y si tienes mas dudas postea el codigo.

Saludos y Suerte

[JessicaTJ]

Puedo flotar los <input> y <select> ?

Eso no lo sabia, como se podria hacer disculpa rodomiro?

[BrutuSS]

Simplemente debería hacer lo que se comenta en el enlace que te ha puesto @rodomiro y flotar los elementos a la izquierda con un float: left;

Prueba y nos cuentas a ver que tal !

[JessicaTJ]

Haber chicos, ya he flotado divs pero no he flotado campos de este tipo, pregunta, el codigo es:

Código HTML:

<div id="search">
    <form action="1.php" method="post">
      <input type="text" style="width:300px; border:1px solid #F00; height:20px; padding:3px 0; margin:4px 5px 4px 10px; vertical-align: middle;" />
      <select name="" class="grayfont" style="height:28px; padding:4px 2px;">
      <option selected="selected">Todas Las Categorias</option>
      <option value="1">Antiguedades</option>
      <option value="2">Arte</option>
      <option value="3">Bebes</option>
      <option value="4">Libros</option>
      <option value="5">Negocio e Industria</option>
    </select> 
    <a href=""><input type="submit" value="" class="christmas" /></a>
    </form>
</div>
 

Debo de flotar el select y el boton input? Debe de tener el div ke contiene todo alguna especificacion o algo? Disculpen si insisto pero no entiendo del todo flotar inputs y eso. Si trato de flotar el select ahi numas me lo avienta a la izquierda y ahi se keda.

[rodomiro]

Te dejo un ejemplo:

#search input {
background-color:#000;
}

Eso hace que todos los INPUT de la DIV tengan fondo negro, ahora si lo quieres hacer mas expecifico, asignales una clase:

HTML:
<input class="cuadro" type="text"/>

CSS:
.cuadro {
background-color:#000;
}

Saludos, cualquier cosa postea.

p.d: En vez de background puede ser float:left;

[JessicaTJ]

Bueno, a final de cuentas evite los float y use position, para no romperme tanto la cabeza, mil gracias chicos !!!