Tenho um cabeçalho que possui uma MARCA (amarelo), um INPUT button e dois LINKS.
Quando eu redimensiono a janela do navegador, quero que o input e os links acompanhem a janela, como na figura abaixo:
O problema é que se a janela ficar muito pequena a DIV (top_botoes) que comporta o input e os links desce, como nesse print:
Eu eu queria que elas permanessem no cabeçalho sem descer para baixo da marca (top_marca), como nessa imagem.
Isso é possível?
Utilizei o position:fixed mas desta forma eu não consigo fazer com que o INPUT e os LINKS deslizem quando a janela é redimencionada(segunda imagem)
Segue o HTML e o CSS da página:
<html xmlns="http://www.w3.org/1999/xhtml"> <style type="text/css"> <!-- .top{float:left; height:46px; width: 100%; background-image: url(images/bgdiv1.gif);background-repeat: repeat-x; display:block;} .top_marca {float:left; width: 160px;} input {float:left; width: 170px; margin: 10px 0px 0px 0px;} .top_botoes {float:right;} .top_links {float:left; width: 150px; margin: 13px 0px 0px 50px;} .top_links a:link {font-family: Verdana;font-size: 11px;color: White;text-decoration: none;} .top_links a:visited{font-family: Verdana, Arial; font-size: 11px; color: White; text-decoration: none; } body {background-color:#000000;} --> </style> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Teste</title> </head> <body> <div class="top"> <div class="top_marca"> <img src="images/marca.jpg" /> </div> <div class="top_botoes"> <input name="criar" type="button" value="CRIAR" /> <div class="top_links"> <a href="#">Link</a> <a href="#">Link</a> </div> </div> </div> </body> </html>
Agradeço desde já a todos.