Responsividad
Este componente se comporta igual que el buscador. Los campos extras, que aparecen alineados debajo del texto de búsqueda fluyen según el espacio disponible.
Los filtros se colocarán a la izquierda de los resultados de búsqueda ocupando el 20% del ancho disponible a partir de 980px. Por debajo de 980px se dispondrán los filtros encima y los resultados debajo.
Código
<div class="buscador-especifico filtro">
<ul class="menu-opciones-buscador">
<li class="ico-ayuda">
<a href="" target="_blank" title="Nueva ventana: Ayuda del buscador específico">Ayuda</a>
</li>
<li class="ico-calendario">
<a href="">Calendario</a>
</li>
</ul>
<form name="formulario" method="get" action="">
<div>
<label for="q">Texto</label>
<input id="q" name="q" type="text" placeholder="Texto a buscar...">
</div>
<div>
<label for="provincia">Provincia</label>
<select id="provincia">
<option>Todas</option>
</select>
</div>
<div>
<label for="fuente">Fuente</label>
<select id="fuente">
<option>Todas</option>
</select>
</div>
<div class="fechas">
<div>
<label for="desde">Desde</label>
<input id="desde" name="desde" type="text" placeholder="dd/mm/aaaa">
<img src="img/calendario-popup.png" alt="">
</div>
<div>
<label for="hasta">Hasta</label>
<input id="hasta" name="hasta" type="text" placeholder="dd/mm/aaaa">
<img src="img/calendario-popup.png" alt="">
</div>
</div>
<div>
<input id="en-plazo" name="en-plazo" type="checkbox">
<label for="en-plazo">En plazo</label>
</div>
<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
</form>
</div>
<div class="resultados-busqueda">
<h2>Resultados de la búsqueda</h2>
<p class="resultados">Resultados 1 - 10 de [N] para <strong>[X]</strong>.</p>
<p class="imprimir"><a href="">Imprimir resultados</a></p>
<!-- Filtros -->
<div id="dyn_nav">
</div>
<!-- /Filtros -->
<dl>
<dt><a href="[ENLACE]">[TÍTULO]</a></dt>
<dd>
[TEXTO]
<ul>
<li class="texto"> Texto</li>
<li class="portal"> <a href="[ENLACE]">[PORTAL]</a> </li>
</ul>
</dd>
[...]
</dl>
</div>