Flexbox . La compatibilidad con exploradores hoy por hoy es buena , esta técnica se puede aplicar sin causar ningún caos dentro de los navegadores.
Este es el CSS, que sólo con un par de líneas logra hacer todo el trabajo y lo que hace es encontrar los lugares adecuados para cada una de las secciones.
<header>
<div class="header-left"><span>Titulo</span>-ec</div>
<div class="header-center">
<ul>
<li><a href="#>hola3</a></li>
<li><a href="#">hola2</a></li>
<li><a href="@">hola1</a></li>
</ul>
</div>
<div class="header-right"><button>Registrarse </button></div>
</header>
css
header{
/* Activamos flex. */
display: flex;
/* extendemos los elmentos dentro de la cabecera. */
justify-content: space-between;
/* Alineamos el contenido verticalmente dentro de la cabecera. */
align-items: center;
padding: 40px 100px;
color: #fff;
background-color: #ccebff;
}
@media (max-width: 1000px){
header{
/* revertimos la cabecera haciendola vertical. */
flex-direction: column;
/* alinemamos el contenido al comienzo (a la izquierda) de la cabecera. */
align-items: flex-start;
}
}
Para obtener más información sobre Flexbox y sus propiedades CSS utilizadas, echa un vistazo a los siguientes enlaces:
Una guía rápida para flexbox
justify-content
align-items
flex-direction
