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.
