<style type="text/css">
<!--
#mancheta
{
width:160px;
background-color:#e0e0e0;
margin-left:5px;
padding:5px;
float:right;
}
#lupa
{
float:left;
padding-right:10px
}
-->
</style>

Visualizar el formato resultante

Aquí aparece el texto normal de la página donde se explican las cuestiones generales.

esto es un texto que se considera importante y aparece en una mancheta

El código de este ejemplo era igual que el del anterior. Para insertar el texto de la zona derecha lo hemos hecho aplicando el identificador id="mancheta" a un delimitador div que se ha colocado antes del segundo párrafo, sin embargo, como hemos aplicado al segundo párrafo el estilo en línea clear="right" se ha impedido la flotación y el párrafo se ha colocado en el flujo normal tras el contenido del delimitador div.

Para la imagen hemos aplicado el identificador id="lupa" cuyas características habíamos definido en la hoja de estilos interna y flota porque no existe ninguna especificación de estilo que se lo impida.

 

Si ves el código podrás comprobar todos los detalles.