Ayuda con mi codigo CSS+HTML

[VbOkonly]

Tengo unas preguntas que me incomodan al ponerlas en practica cuando inserte codigo php xD.

Código HTML:

 <div id="muestrabackground">
      <div id="muestrafoto"></div>
      <div id="muestrainformacion"></div>
    </div> 

Código HTML:

#muestrabackground {
	height: auto;
	width: 800px;
	position: relative;
}
#muestrafoto {
	float: left;
	height: auto;
	width: auto;
	margin-left: 20px;
}
#muestrainformacion {
	float: left;
	clear: left;
	height: auto;
	width: auto;
	margin-left: 20px;
}

Esta bien aplicado CSS?, muestro con php y necesito tener en auto muestrafoto y muestra informacion, pero a la vez se que "todo lo que flota tiene que tener medidas exactas", lo probe y funcionó masomenos, pero necesito la ayuda de alguien mas experto si es posible ... a la larga los pequeños errores se notan ...

[cristian_cena]

Hola VbOkonly, no se bien cual es el problema pero prueba con:

Código CSS:

#muestrabackground {
    width: 800px;
    position: relative;
overflow:hidden;
}
#muestrafoto {
    float: left;
    height: ... medida en px ...;
    width: ... medida en px ...;
    margin-left: 20px;
}
#muestrainformacion {
    float: left;
    height: ... medida en px ...; /*puedes poner o no el height, la capa crecerá según el contenido que tenga*/
    width: ... medida en px ...;
    margin-left: 20px;
}
 

recuerda que el ancho total de una capa es igual a: padding+margin+width+border.

Si las capas flotadas superan en ancho total a la capa que las contiene entonces la capa que no quepa pasará a la línea siguiente (o sea, abajo, descuadrandote el diseño).

No des height:auto; a la capa padre, mas bien incluye overflow:hidden; con esto la capa padre entenderá que debe tomar el alto de acuerdo al alto de su capa hijo mas alta. Esto se conoce como "limpiar los float" puedes verlo en google.

Espero esta info te sea útil. cualquier cosa no me haya explicado bien nada mas pregunta.

Saludos.