Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá profissionais do iMasters!
Gostaria de pedir a ajuda de vcs pra melhorar o posicionamento do TOPO do meu site que fica com erro de posição em alguns navegadores.
Portanto, eu preciso de ajuda pra posicionar essas 3 divs: logo, busca e menu de tal maneira que ficasse na mesma posição em todos os principais navegadores.
Sendo que o logo fica a esquerda a barra de busca fica no meio e o menu fica a direita.
E o mais importante eu quero fazer isso apenas com CSS puro e simples mesmo, sem usar aqueles frameworks sofisticados tais como bootstrap, grids e etc.
Agradeço a ajuda de todos e qualquer dúvida me avise que eu respondo logo!
<style type="text/css">
#bg_topo {background: #FFA71C; min-width:1214px;margin: 0 auto; text-align:center;}
#topo {width: 1214px;margin: 0px auto 0; color:#FFF; border:solid 1px white}
#logo { margin:0; float:left; border:black 1px solid}
#busca {margin-left:50px; float:left; text-align:center; border:blue solid 1px}
#menu { margin-left:10px; float: right; border:solid 1px red}
.clear{clear:both;display:block;overflow:hidden;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0}
</style>
<!-- INICIO DO TOPO -->
<div id="bg_topo">
<div id="topo">
<div id="logo">
<a href="/" title="Meu Site"><img src="logo.png" alt="Meu Site"/></a>
</div>
<div id="busca">
<!-- aqui o formulário de busca -->
</div>
<div id="menu">
<ul id="nav">
<li><a href="/" title="Início">Home</a></li>
<li><a href="/quem-somos" title="Sobre nós">Quem Somos</a></li>
<li><a href="/contato" title="Fale Conosco">Contato</a></li>
</ul>
</div><!-- #menu -->
<div class='clear'> </div>
</div><!-- #topo -->
</div><!-- bg_topo -->Carregando comentários...