Menu fixo superior desorganizado ao redimensionar janela

[AndréMachado 1]

Olá, pessoal!

 

Estou desenvolvendo um sistema imobiliário em PHP. A parte server-side está ótima, mas estou apanhando do CSS.

 

Meu objetivo é colocar um menu superior fixo (similar ao do Facebook) no topo da página com as opções mais comuns e um formulário de busca. Consegui fazer o seguinte:

 

http://jsfiddle.net/B2erF/

 

No entanto, como vocês verão, apesar de o menu funcionar como o esperado, ao redimensionar a janela, o formulário e o menu da direita saem fora da área reservada ao menu. Já tentei de tudo, inclusive transformá-lo em responsivo (o que, futuramente desejo) com o SlickNav e o FlexNav, mas eles além de não ajudarem, pioraram a situação.

 

 

Então, no momento, minha dúvida é: como impedir que o formulário de busca e o menu da direita saiam do menu quando a janela fica menor? Pode ser, inclusive, com barra de rolagem horizontal.

 

[Marlon Pacheco 132]

A única maneira que vejo de corrigir isso é usando media queries e alterando o tamanho dos elementos de acordo com a resolução. Ou seja, deixando esse menu responsivo.

Uma 'gambiarra' que funcionaria é colocando um min-width: largura-mínima. Assim vai colocar um scroll na horizontal (mto feio, mas...).

[Pachevisk 3]

Também usaria media queries e trocaria os valores do menu de px para %.

 

Com % você cria as medias queries, ajusta e organiza somente quando o "layout quebrar".