Ancho de divs dependientes

[sergio89]

Tengo una serie de buscadores, en los que se carga en la parte de la izquierda unos filtros para buscar y en la parte de la derecha los resultados.

Según el buscador que seleccione, se cargan diferentes filtros y la tabla de resultados tiene mas o menos columnas. Por lo que la anchura de estos dos divs varían dependiendo del buscador.

El resultado tiene que ser algo asi:


Mi codigo es:

Código:

<div id="contenedor" style="width:100%;">
      <div id="buscador" style="float:left; overflow:hidden;">
               <table></table>
      </div>
      <div id="resultados" style="float:left; overflow:hidden;">
               <table></table>
      </div>
</div>

Lo que intento hacer es que los dos divs de buscador y resultados ocupen el 100% de contenedor y que dependiendo del tamaño de buscador, los resultados sean mas anchos o menos.

Muchas gracias

[IsaBelM]

al primer bloque le das un ancho de este modo el segundo tomará el ancho restante hasta el 100%

[sergio89]

La cuestion es que el ancho del primer bloque también es dinámico.

[pablolombardo]

Bueenas,

2 posibilidades veo.

O hacés un maquetado con dos columnas. Tipo una de 30% y otra de 70% y que los contenidos de cada una se adapten a estas medidas.

O si no te queda otra y necesitas que si o si para cada buscador tome medidas muy diferentes lo resolvería con javascript. Mediante obtener una vez cargado el buscador su ancho y se lo restas al 100% de la ventana. El resultado sería el ancho que tiene que tener el <div> de resultados.

Saludos.

[mariogl84]

¿La anchura del primer div se la estableces tú mediante JS, o simplemente se ajusta a su contenido?

Porque si sabes la anchura del primer div, te bastará con quitarle el float:left al segundo, y ponerle un margin-left igual a la anchura del primer div.