Duda con este pequeño código

MikiBroki · #1 (**permalink**) 26/04/2011, 05:40

Hola buenas,

Tengo los siguientes códigos HTML y CSS que se visualizan bien en todos los navegadores:

Código:

<html>
    <head>
        <title>Tutorial CSS</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>

	<body>		

		<div>Texto en el div</div>
		<span>Este texto está dentro del body y fuera del div</span>

	</body>
</html>

Código:

div {
	float:left;
	height:80px;
	width:100px;
    background-color:yellow;
}

span {
	background-color:cyan;
}

La duda que me surge es, que si pongo el SPAN antes del DIV no se muestra bien en Explorer 9 (no he podido probarlo en versiones anteriores), es como si a pesar de definir un ancho y flotar el DIV a la izquierda crease una línea (al ser de tipo block) pero a todo el ancho disponible.

¿Cuál es el motivo y de qué modo podría solucionarse?

Muchas gracias

C2am · #2 (**permalink**) 26/04/2011, 08:05

Lo que sucede que <span> es un elemento de linea, mientras que <div> es de bloque.
Lo que puedes intentar es ponerle en el css a ese <span> un display:block, de manera que se comporte como un elemento de bloque.
Pero lo mejor es que reemplaces ese span por algun elemento de bloque, ya que no se permite, o no es muy correcto poner un elemento de bloque dentro de un elemento de linea.

Más info:http://www.librosweb.es/xhtml/capitu...ntos_html.html

MikiBroki · #3 (**permalink**) 26/04/2011, 08:17

Gracias C2am, el caso es que estoy haciendo precisamente un ejemplo con un elemento block (div) con el contenido de un elemento inline (span) flotando a su derecha. Ppor ello le pongo dimensiones y lo floto a izquierda al div.

En todo caso, entiendo al ser el span de tipo inline debería flotar igualmente se ponga antes o después del div (en FF, Chrome y demás se ve bien independientemente de donde esté).

Un saludo y gracias