Problema con float y mobile.

[brunob1523]

Buenas tardes!
Estoy intentando adaptar una web para mobiles, y me surgió este problema que no le encuentro la vuelta.
Tengo dos divs, una para "Quienes somos" y otra para "Que hacemos" como se muestra en la siguiente imagen, con los siguientes estilos respectivamente.

Código:

#infoder{
	width: 400px;
	height: 400px;
	margin-top: 70px;
	float: right;
	font-weight: bold;
	text-align: justify;
}

#infoizq{
	width: 400px;
	height: 350px;
	margin-top: 70px;
	float: left;
	text-align: justify;
}

Luego con media queries les aplico lo siguiente:

Código:

#infoder{
		max-width: 100%;
		margin-top: 450px;
		margin-left: 10px;
		float: none;
	}
	
	#infoizq{
		max-width: 100%;
	}

La idea es que en teléfonos se vea como lo siguiente, pero el bloque de "que hacemos" vaya exactamente debajo del otro. Esto lo logro para telefonos con resoluciones pequeñas, pero con telefonos mas grandes ya se me ve como en la imagen:



Con float: left; tampoco anda.

Alguna idea para solucionar esto?
Muchas gracias!

[rbnncls]

Mmm, hola!

Pues no soy ningún experto, pero si no lo entiendo mal, tienes un margin-top:450px; en el div #infoizq que si no me equivoco es el que corresponde a "¿Qué hacemos?"

¿Has probado, en lugar de poner ese margin-top, colocar entre los dos div un div separador con un determinado height o un % ?

Otra cosa de la cual yo no entiendo es a partir de qué resolución usan los dispositivos la resolución web móvil o la normal. Pero quizá se aplique la web normal a esos dispositivos de los que hablas.

Espero haber podido ayudar

[brunob1523]

Gracias por tu respuesta!

Así es, al div #infoder de "que hacemos" le doy un margin-top para que me quede debajo y no a la derecha, pues no se me ocurrió otra cosa.

Como es lo que dices del separador? no logro imaginarlo.

Generalmente los teléfonos no pasan de los 800px de ancho, hay de mayores resoluciones pero no abundan, al menos no en mi país. Por eso hago que se cambie el diseño para resoluciones menores a 800px.

Saludos!

[pzin]

Elimina ese margen superior, te bastaría con aplicar esto para los móviles:

Código CSS:

#infoder, #infoizq {
  float: none;
  width: auto;
}
 

El ancho automático es porque así ocupará todo el ancho, ya que son elementos de bloque, y automáticamente se pondrán uno debajo del otro.

[rbnncls]

Pues, con lo del div separador, quería decir que entre el div #infoder y el div #infoizq pusieses un div .separador u algo así.

Aunque ahora que lo pienso usando simples clear: both; se consigue que floten ocupando cada uno su espacio uno bajo otro.

Algo así como esto, con porcentajes, no sé qué tal habría que probar:

Código CSS:

#infoder {
        max-width: 100%;
        margin-top: 450px;
        margin-left: 10px;
        clear: both;                 /* -- Agregando clear:both debe quedar uno bajo el otro -- */
    }
    
 
#infoizq {
        max-width: 100%;
                clear: both;                 /* -- Agregando clear:both debe quedar uno bajo el otro -- */
    }
 
 
.sep      {
                clear:both;
                height:5px;                  /* -- Probar cambiando el tamaño del div sep -- */
                width:100%; 
         }
 

Lo del separador sería algo así, (pero creo que el clear:both o left lo debe solucionar):

Código HTML:

<div id="infoizq"> Contenido </div> <div class="sep" /> <div id="infoder"> Contenido </div> 

Usando clear:both se debe solucionar. Pese a eso el separador no viene mal, es como una forma de asegurarse.

Espero que te sirva, saludos

[hackjose]

Te dejo un ejemplo
http://jsfiddle.net/ymMX3/

saludos

[brunob1523]

Genio rbnncls!!! Hice que funcionara usando clear.
Floté ambos a la izquierda, jugué con el width del #infoizq y le di clear:right.
Probé con lo que mencionaron los demás pero no tuve suerte.

Quedó bárbaro.

Muchas gracias a todos!
Saludos