Essa semana eu tive um pequeno impasse ao desenvolver um layout responsivo. Eu queria um campo input ao lado de um botão submit e que ocupasse o tamanho total da div externa.
Mas para que isso? Ora, se o site é responsivo o tamanho da div vai variar conforme a tela, certo? Então o campo input e o botão deveriam seguir essa mesma linha de flexibilidade.
A primeira idéia foi alinhar o botão à direita, o campo input a esquerda e fixar a sua largura. Até um certo pronto ficou legal, mas quando abre um determinado tipo de dispositivo o espaçamento entre o campo input e o botão fica muito grande deixando o layout feio. Então a solução foi pesquisar mais até encontrar uma forma mais ideal, vamos lá para o código.
Primeiro o html
<form action="" method="">
<input class="button" name="OK" type="submit" value="OK" />
<div class="input"><input name="search" type="text" /></div>
</form>
Agora o CSS
.button {
float: right;
}
.input {
overflow: hidden;
padding: 0 3px 0 0;
}
.input input {
width: 100%
}
Perceba que o botão continuou flutuando a direita, mas criei uma div extra para armazenar o campo input e nesta div dei um overflow: hidden para que ambos os elementos permaneçam sempre na mesma linha. A partir daí foi só fixar a largura do input como 100%.
Fácil não?
