[SOLUCIONADO] Posicionamiento flotante

[juanicotolengo]

Qué tal? Tengo un inconveniente que estoy intentando resolver. Tengo una imagen con posicionamiento flotante a la derecha de un texto. Luego se me pidió que cierta información se disponga debajo de la imagen, y que el texto que está a la izquierda siga respetando ese posicionamiento. Para agregar el texto, dado que la imagen tiene un borde creé dos DIV: uno para contener el DIV de la foto y el nuevo DIV con la información. En CSS tengo el siguiente código:

Código:

#container_foto
                        // DIV que contiene foto y texto
			{
			 height: 400px;
			width: 170px;
			float: rigth;
			padding: 4px;
			margin: 0px 34px 10px 13px;
			}
		#foto 
                        // Foto a mostrar en el DIV #container_foto
                       {
			height: 150px;
			width: 150px;
			margin: 0px 34px 10px 13px;
			padding: 4px;
			border: 1px solid rgba(0, 0, 0, 0.2);
			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
			display: block;
			}
		#datosfoto {
                        // Información a mostrar debajo del DIV #foto
			height: 50px;
			width: 150px;
			margin: 0px 0px 0px 2px;
			padding: 4px;
			display: block;
			}
		#descripcion {
                        // Descripción que envuelve a los DIV de arriba
			width: 950px;
			height: auto;
			text-align: justify;
			padding-left: 16px;
			display: block;
			}

Ahora bien, cuando llamo a los elementos desde el HTML, me muestra la foto arriba a la izquierda junto con el texto, y el texto con la descripción abajo. ¿Qué podré estar haciendo mal? Muchas gracias!

[C2am]

Muestra el html donde se aplican esos estilos.
Saludos

[juanicotolengo]

Acá va el código:

Código:

<div id="container_foto">
			<div id="foto"><img src="foto.jpg" />
			</div>
			<div id="datosfoto">
				<p><strong>País: </strong>Chile</p>
				<p><strong>Inicio Actividad: </strong>1990</p>
			</div>
</div>
<div id="descripcion">
                <p>Acá va todo el texto, es bastante largo, pongo poca info</p>
</div>

[C2am]

Es

Código CSS:

float: right;
 

y no

Código CSS:

float: rigth;
 

Además, como que tienes un ataque de divitis.

Saludos

[juanicotolengo]

Que paparulo, gracias! Era eso nomás. Tengo ese mismo problema incluso cuando pongo height, solo que en ese caso el notepad++ me lo marca. Tengo vicios a la hora de utilizar CSS, aprendí de autodidacta, pero en cada trabajito voy aprendiendo mas. Por cierto, ¿de qué manera podría mejorar la divitis? Saludos!

[C2am]

Bueno, con un poco de html5 y css:
http://jsfiddle.net/c2am/dFDwq/59/embedded/result/

Seguro se puede mejorar más:

Código HTML:

<div id="contenedor">
    <figure>
        <img src="foto.jpg" width="150" height="150"/>
        <figcaption>
            <strong>País:</strong>
        Chile
            <br/>
            <strong>Inicio Actividad</strong>
        1990
        </figcaption>
    </figure>
    <div id="descripcion">
                <p>Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info,Acá va todo el texto, es bastante largo, pongo poca info ,Acá va todo el texto, es bastante largo, pongo poca info ,Acá va todo el texto, es bastante largo, pongo poca info ,Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info</p>
      
    </div>    
</div>
 

Código CSS:

#contenedor{
    width:950px;
transition: width 10s;
-webkit-transition: width 10s; /* Safari */
}
#contenedor:hover{
    width:170px;
    
}
figure {
    width: 170px;
    float: right;
    background: #FFF;
    margin: 0 0 10px 10px;
     text-align:center;
}
figure img{
    width: 150px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   
}
figcaption {
    background:#DDD;
    padding: 5px;
    width: 150px;
     margin:0 auto;
}
#descripcion {
    background:#EEE;
    text-align: justify;
    padding-left: 16px;
    padding-right: 16px;
}