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!

[IsaBelM]

prueba con esto

#contenedor-suscripcion-2{
position: absolute;
left: 8%;
overflow: hidden;
background: #FCEC0A;
border: 1px solid #000;
}

el 8% es sólo una estimación

[C2am]

Lo que haría es ponerle un ancho fijo a "#contenedor-suscripcion-1", o en caso de no querer limitarlo así, le pondría un min-width igual a la suma de los div que contiene de manera que al disminuir el ancho lo haga hasta ese valor, y no más.

Código CSS:

#contenedor-suscripcion-1{
width: 100%;
min-width: 570px + lo que ocupe we are social;
margin: 0;
overflow: hidden;
clear:left;
background: #FCEC0A;
border: 1px solid #000;
}
 

[outsourceresellerseo]

Hi,

your code doesn't describe problem clearly. Can you send me the URL of your page having problem

[MarioMX]

Saludos, por la descripción parece tema de anchos en tus divs, o bien como están "encapsulados" los contenidos, por ejemplo, puede pasar que tienes una estructura como esta:

Código:

<div class="c1">
  <div class="c2">
     <img src="tuimagen.png" alt="etwas" border="0"/>
  </div>
</div>
<img src="tuimagen2.png" alt="etwas" border="0"/>

en este caso .c1 funciona como contenedor, .c2 hace las veces de contenido y como podrás notar "tuimagen2.png" aparece fuera del contenedor, en este caso si .c1 tiene un width y float definidos va a excluir del contenedor a "tuimagen2.png" por defecto. Creo que puede ser por ahí. Espero sea de utilidad.