Por un lado mi html
Código:
<div id="topbarmax">
<div id="topbar">
<ul>
<li><a class="enlace" title="Inicio" href="<?php echo get_settings('home'); ?>">Inicio</a></li> |
<?php wp_list_pages('include=2&title_li'); ?> |
<?php wp_list_pages('include=7&title_li'); ?> |
<li><a class="icon" title="Feed" href="<?php bloginfo('rss2_url'); ?>">Feed </a></li>
<!--<li><a class="icon" href="<?php bloginfo('comments_rss2_url'); ?>">comentarios feed</a></li>-->
</ul>
</div>
<div id="buscar">
<form class="searchform" method="get" action="<?php echo get_settings('siteurl'); ?>/index.php">
<p>Buscar <input type="text" name="s" size="15" /></p>
</form>
</div>
</div>
Por otro mi css
Código:
#topbarmax {background: #000;padding: 5px 25px 5px 25px;}
#topbar {margin-top:1px;position:absolute;text-align:left;color: #fff;text-transform: uppercase;font-size: 0.95em;font-family:Arial,Verdana,sans-serif;font-weight: bold;}
#topbar li {list-style-type: none;display: inline;}
#topbar .icon {color: #fff;background: #000 url(images/feed.png) right no-repeat;padding: 0 15px 0 0;}
#topbar a {color: #fff;}
#buscar{text-align:right;}
.searchform, searchform p{text-transform: uppercase;color: #fff;font-size: 0.95em;font-family:Arial,Verdana,sans-serif;font-weight: bold;}
.searchform input {margin-bottom:1px;width: 12em;background: #fff;color: #000;border: 0;}
ahora mi consulta, quisiera que el elemento "buscar" fuera parte del "topbar" teniendolos posicionados como estan (el topbar a la izquierda y el buscar a la derecha) sin tener que utilizar como hago ahora el position-absolute y colocandolos con el text-align para por ejemplo si aumento el tamaño de letra con el navegador no se solapen. Tambien se aceptan recomendaciones respecto a depurar o mejorar el codigo : ) Un saludo y gracias anticipadas.