Ancho de texto en móvil

[seda2005]

Hola a todos. Tengo un problema que me está volviendo loco.

El caso es que tengo un div centrado y dentro de él dos columnas sin un alto específico. El problema viene que cuando cargo la página en el navegador del móvil, el texto en la columna de la izquierda no ocupa todo el espacio, sino que hace como si fuera un margin a la derecha que no hay forma de quitar.

Gracias!!!

[pzin]

Bienvenido a FdW seda2005.

Sin que muestres algo de código no va a ser posible ayudarte. A menos que aparezca alguien con una bola mágica.

[seda2005]

Ahi va el código:

Código HTML:

<div id="wrapper">
	<div id="left_cont">
    	<div id="titulo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin est ipsum, auctor vitae varius id, fringilla non augue.</div>
        <div id="subtitulo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin est ipsum, auctor vitae varius id, fringilla non augue. Sed egestas ultrices nulla, ac consectetur mauris porta id. Morbi sed nulla diam, sollicitudin scelerisque dui.</div>
        <div id="cuerpo">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin est ipsum, auctor vitae varius id, fringilla non augue. Sed egestas ultrices nulla, ac consectetur mauris porta id. Morbi sed nulla diam, sollicitudin scelerisque dui. Vestibulum sagittis, mi at mollis mattis, dolor lectus posuere dui, sed tincidunt massa dui in diam. Curabitur eros metus, euismod sed ornare ac, consequat porttitor eros. Aenean cursus dignissim ligula, sit amet varius dolor suscipit id. Duis ornare sagittis felis. Duis vitae quam leo, iaculis consectetur diam. Cras tristique, enim quis consequat gravida, ante lacus fermentum quam, sit amet accumsan magna ante nec orci. Mauris metus justo, suscipit vel facilisis vitae, porta sed massa. Nullam aliquam, neque scelerisque adipiscing mollis, diam leo elementum urna, et pharetra ligula risus quis orci. Sed nisl dolor, viverra ac pulvinar eu, fermentum quis dui. Donec sodales, tortor ultricies fermentum tempor, ipsum erat volutpat velit, nec accumsan lorem massa ac eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sem mi, adipiscing at ornare sit amet, eleifend nec nunc. Nullam sagittis, nunc sit amet egestas ornare, purus tellus pulvinar sapien, quis ullamcorper justo quam at enim.</p>
        </div>
    </div>
    <div id="right_cont"></div>
</div> 

CSS:

Código:

body {
	margin: 0px;
	padding: 0px;
	background: #FFFFFF;
	font-family: 'Abel', sans-serif;
	font-size: 16px;
	color: #000;
}

p {
	margin-top: 0;
	line-height: 240%;
}

#wrapper {	
	clear:both;
	margin:0 auto;
}

#wrapper #left_cont {
	float:left;
}

#left_cont #titulo {
	font-size:1.2em;
	font-weight:bold;
	clear:both;
	border-bottom:#333 solid 1px;	
	letter-spacing:0px;
}
#left_cont #subtitulo {
	margin: 0 0 10px 0;
	font-size:1em;
	font-weight:400;
	clear:both;
	letter-spacing:0px
}

#left_cont #cuerpo {
	width:100%;
	clear:both;
	font-size:1em;
	font-weight:normal;
	text-align:justify;
	line-height:20px;	
	letter-spacing:0px
}

#wrapper #right_cont {
	width:250px;
	float:left;
	font-size:1.5em
}

El tema es que el texto del div left_cont aparece en el navegador móvil como si tuviera un margin a la derecha, sin ocupar todo el ancho del div. Probando, he visto que si especifico el height, no ocurre. El tema es que no puedo especificarlo ya que es un campo destinado a una noticia, que puede ser más o menos alta y quiero que rellene todo.

Gracias!!

[pzin]

Yo sólo veo que eso le pasa al elemento #subtitulo. Y no es porque tenga un margen, sino porque el texto no está justificado como el texto que viene a continuación.

[seda2005]

Pues pasa en el navegador del móvil con todo el texto de la columna de la izquierda, y no es el móvil, he probado con varios.

[pzin]

Iniciado por seda2005

Pues pasa en el navegador del móvil con todo el texto de la columna de la izquierda, y no es el móvil, he probado con varios.

Yo lo probé en iOS y sólo afectaba a #subtitulo.

[seda2005]

La verdad que sólo he probado con Android. Alguien podría probar desde android y confirmármelo??

Gracias!!

[seda2005]

Creo haber descubierto lo que pasa. El problema puede partir de que los margin no funcionan de forma adecuada. Con el siguiente código:

Código HTML:

<div style="width:574px;margin:0 auto;">
	<div style="width:280px; margin:0 20px 0 0; float:left; text-align:justify; border:#000 1px solid;">Lorem ipsum do...</div>
    <div style="width:270px; float:left; text-align:justify; border:#000 1px solid;">Lorem ipsum d...</div>
</div> 

Y modificando el ancho de la caja principal y la izquierda, según vas aumentando, va pasando esto:

http://www.flickr.com/photos/93424388@N02/8494916040/
http://www.flickr.com/photos/93424388@N02/8493817541/
http://www.flickr.com/photos/93424388@N02/8494915962/
http://www.flickr.com/photos/93424388@N02/8494915912/

Qué me decís de esto?

Gracias!!