Diseño fluido

[sergi_multimedia]

Hola a todos, retomando el tema, he reconstruido la web de manera fluida.

Todo lo tengo como me gusta, e incluso he añadido @media queries para resoluciones por debajo de 721px.

Pero hay una cosa que se me resiste, que es el header.

En cada uno de los bloques que hay a la derecha me gustaría que la suma de los 4 ocuparan el mismo alto que el logotipo. Entonces que sucede? Pues que cuando voy cambiando el ancho del navegador, la imagen se hace más pequeña, o sea menos alta y los bloques de la derecha como tienen float: left, se me ponen debajo de la imagen.

Yo lo que quiero es que los bloques de la derecha se vayan haciendo también más pequeños a medida que la imagen se hace más pequeña, y que ocupen siempre el 100% de altura de la imagen o del header, no sé si se me entenderá lo que quiero llegar a explicar.


Os dejo el codigo actualizado:

Código HTML:

header {
    width: 100%;
    overflow:hidden;
    margin: 0 0 2.5% 0;
}
 
header #logo {
    float: left;
    width: 19.79%;
}
 
header #logo img {
    width: 100%;
}
 
header h1#title {
    float: left;
    width: 80.21%;
    text-align: center;
    font-size: 230%;
    font-family: 'OldCentury';
    line-height: 1.3em;
    color: #1f3948;
    text-shadow: 1px 1px 2px #e0e0e0;
    font-weight: normal;
    background-color: blue;
    padding: 0;
    margin: 0;
}
 
header h1#subtitle {
    float: left;
    width: 80.21%;
    text-align: center;
    font-size: 160%;
    font-family: 'Karla', sans-serif;
    line-height: 1em;
    background-color: red;
    padding: 0;
    margin: 0;
}
 
header h1#slogan {
    float: left;
    width: 80.21%;
    text-align: center;
    font-size: 160%;
    font-family: 'Karla', sans-serif;
    line-height: 1em;
    background-color: blue;
    padding: 0;
    margin: 0;
}
 
nav ul {
    padding: 0;
    list-style-type: none;
    float: left;
    margin: 0 0.4% 0 0;
    width: 77%;
    background: yellow;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
nav ul li {
    display: block;
    text-align: center;
    float: right;
    line-height: 2.2em;
    font-family: 'Coda', cursive;
    font-size: 1.2em;
    margin: 0 0 0 0;
    width: 15%;
}
 
nav li a {
    display: block;
    text-decoration: none;
    color: #2c455b;
    background-color: #f3f3f3;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
}
 
nav ul li a:hover {
    background-color: #becad5;
    color: #2c455b;
}
 
nav ul li a:active {
    -webkit-box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, .5);
    box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, .5);
    background-color: #dedede;
}
 

Código CSS:

<header>
           <div id="logo"><img src="img/logo.png" alt="logo"></div>
            <h1 id="title">GUARDIAN PRO CABLES</h1>
            <h1 id="subtitle">High Quality Instrument Cables</h1>
            <h1 id="slogan">Protect Your Sound</h1>
            <nav>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Artist</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Cables</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </nav>
        </header>
 

Un saludo ;)