Problema con bloques float (Se mueven para abajo)

[jasinski]

Hola como va gente, hace poco empece con CSS y bueno entre algunos diseños que me puse a hacer para practicar llegue hasta este el cual no le encuentro la vuelta.
El tema es así:
Yo quiero hacer unos menús en la parte superior de la página como se muestra en la siguiente imagen:


http://4.bp.blogspot.com/-boy9hN4H7c8/TrxDOPgEQ8I/AAAAAAAAA4A/oXTs9rnjesc/s1600/dise%25C3%25B1o.png


De código hice algo como esto:

HTML

Código HTML:

<!-- Lastest Tweet -->
		<div id="contenedor-tweets-1">
			<div id="contenedor-tweets-2">
			
				<h4 id="lastesttweet"><a href="./" title="Lastest Tweet">LASTET TWEET</a></h4>
				<div id="tweets"> Acá van los últimos tweets</div>
				
			</div>
		</div>
		
		
		<!-- Suscripción -->
		<div id="contenedor-suscripcion-1">
		
			<div id="contenedor-suscripcion-2">
			
				<div id="suscripcion-1">
					<h4>SUSCRIBITE A NUESTRO BOLETÍN</h4>
				</div>
		
				<div id="suscripcion-2">
					<form action="" method="get">
						<input type="text" name="email" size="30" />
						<input type="submit" name="botonbuscar" value="Suscribe" />
					</form>
				</div>
			</div>
			
			<div id="contenedor-suscripcion-3">
				<h4>WE ARE SOCIAL</h4>
			</div>
		</div> 

CSS

Código HTML:

#contenedor-tweets-1{
width: 100%;
margin: 0;
overflow: hidden;
clear:left;
background: #EEE;
}

#contenedor-tweets-2{
overflow:hidden;
width: 770px;
margin: 0 auto;
background: #CCC;
}

#lastesttweet{
float:left;
margin: 0;
padding: 10px 10px;
width: 200px;
}

#lastesttweet a{
color: #000;
text-decoration: none;
}

#tweets{
margin:0;
padding: 10px 0;
float:left;
width: 200px;
}

#contenedor-suscripcion-1{
width: 100%;
margin: 0;
overflow: hidden;
clear:left;
background: #FCEC0A;
border: 1px solid #000;
}

#contenedor-suscripcion-2{
float:left;
margin: 0 0 0 100px;
overflow: hidden;
background: #FCEC0A;
border: 1px solid #000;
}

#contenedor-suscripcion-3{
float:right;
overflow: hidden;
background: #FFF;
border: 1px solid #000;
}

#suscripcion-1{
float:left;
width: 270px;
border: 1px solid #000;
}

#suscripcion-2{
float:left;
width: 300px;
border: 1px solid #000;
}

A primera vista va encaminado! Como ven en la imagen (Obvio que le falta mucho formato) pero la idea va queriendo.

http://1.bp.blogspot.com/-cpuTwVNKBuw/TrxFSsSjtJI/AAAAAAAAA4I/B4JA1kUv4XY/s1600/ejemplo+1.png


El problema viene aca! Cuando redimensiono la ventana, al tener bloques float, se me mueven para abajo de la siguiente manera:

http://2.bp.blogspot.com/-WWrj3062q0Y/TrxFTTnPmsI/AAAAAAAAA4Q/WrYPUw7lI9k/s1600/ejemplo+2.png


Justamente lo que no quiero que pase!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Alguna idea??????
Les dejo los 2 archivitos completos para que los bajen por si lo quieren mirar un poco mas a fondo!

Archivo HTML:
https://sites.google.com/site/aguanteyo88/ejercicio13.html?attredirects=0&d=1

Archivo CSS:
https://sites.google.com/site/aguanteyo88/principal.css?attredirects=0&d=1


Gracias de antemano!