ABSOLUTE

Imager le résultat pour le code suivant pour les différents styles :

Pour vous aider vous pourrez compléter le style de conteneur avec

background-color: yellow;

<body>
    <div class="conteneur">
        <img class="image" alt="..." src="photo.jpg">
        je suis la plus belle dans mon miroir je suis la plus belle dans mon
        miroir
    </div>
</body>

TD1

.conteneur {
    padding-top: 200px;
    padding-left: 15px;
    width: 400px;}

.image {
    float: right;}

TD2

.conteneur {
    padding-top: 200px;
    padding-left: 15px;
    width: 400px;}

.image {
    float: left;}

TD3

Pour le code suivant :

<div id="global">
   	<img class="image" alt="..." src="photo.jpg" />
  	 <div class="textimage">
		DEBUT1---
		je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
		...
		je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
	</div>
	<img class="image" alt="..." src="photo.jpg" />
	<div class="textimage">
		DEBUT2---
		je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
		...
		je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
	</div>
</div>

#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 800px;
     margin-top: -200px; /* moitié de la hauteur */
     margin-left: -300px; /* moitié de la largeur */
     border: 1px solid #000;}

.image {
	float: left;
	padding:10px;
	width:300px;
	border:   5px solid #000;}

.textimage {
	float: left;
	padding: 20px; 
	width:400px;
	border: 5px double #000;}

TD4

pour le même code que TD3,

tester sur mozilla et IE

(probleme de non définition de width)

#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 700px;
     margin-top: -200px; /* moitié de la hauteur */
     margin-left: -300px; /* moitié de la largeur */
     border: 1px solid #000;}

.image {
	float: left;
	padding:10px;
	border:   5px solid #000;}

.textimage {
 	float: left;
 	padding: 20px; /*  */
    	border: 5px double #000;
}

TD5

<div id="global">
	<img class="image" alt="..." src="photo.jpg" />
	<img class="image" alt="..." src="photo.jpg" />
	<img class="image" alt="..." src="photo.jpg" />
	<img class="image" alt="..." src="photo.jpg" />
   	<div class="textimage">
		DEBUT-1---
		je suis la plus belle dans mon miroir 
		...
		je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
	</div>
	<img class="image" alt="..." src="photo.jpg" />
   	<div class="textimage">
		DEBUT-2---je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir

		je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
	</div>
</div>

Tester sur IE et Mozilla !

#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 600px;
     margin-top: -200px; /* moitié de la hauteur */
     margin-left: -300px; /* moitié de la largeur */
     border: 1px solid #000;}

.image {
 	float: left;
 	margin: 10px;
 	width: 40%;
}
.textimage {
	float: left;
	margin: 10px;
	width: 50%; 
}