[CSS 2] Alignement d'image et de texte dans un div [Résolu]

[richard_sraing]

Bonjour à tous,

Alors voilà, dans le développement d'un site internet (à l'aide du CMS contao), je souhaiterai réaliser l'affichage d'un ensemble d'évènements sous forme de liste.

J'ai donc, dans un premier temps, ceci :

Au niveau du code, j'ai ceci :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="event layout_teaser even first cal_2" height="200px">
 
<!-- Insertion de l'image de l'entrée, si existante seulement -->
  <img class="event affiche" src="system/html/expo-le_carnval_dans_le_temps-0f5518ad.jpg"  width="143" height="200"/>
 
<h2><a href="index.php/details-evenement/events/le-temps-du-carnaval-le-carnaval-dans-le-temps.html" title="Le temps du carnaval, le carnaval dans le temps (17/09/2011 - 11/12/2011)">Le temps du carnaval, le carnaval dans le temps</a></h2>
<p class="time">17/09/2011 - 11/12/2011</p>
<div class="teaser">
<div align="justify">Une exposition haute en couleurs composée de documents sonores et photographiques, de costumes anciens, etc.</div> 
</div>
<p class="more"><a href="index.php/details-evenement/events/le-temps-du-carnaval-le-carnaval-dans-le-temps.html" title="Lire l'article: Le temps du carnaval, le carnaval dans le temps">En savoir plus... <span class="invisible">Le temps du carnaval, le carnaval dans le temps</span></a></p>
</div>
<div class="event layout_teaser odd last cal_2" height="200px">
 
<!-- Insertion de l'image de l'entrée, si existante seulement -->
  <img class="event affiche" src="system/html/expo-djacob-d67909bf.jpg" alt=""  width="142" height="200"/>
 
<h2><a href="index.php/details-evenement/events/photos-de-dominic-jacob-3.html" title="Photos de Dominic Jacob (25/10/2011 - 27/11/2011)">Photos de Dominic Jacob</a></h2>
 
<p class="time">25/10/2011 - 27/11/2011</p>
<div class="teaser">
<p>Exposition de photographies de Dominic Jacob.</p> 
</div>
<p class="more"><a href="index.php/details-evenement/events/photos-de-dominic-jacob-3.html" title="Lire l'article: Photos de Dominic Jacob">En savoir plus... <span class="invisible">Photos de Dominic Jacob</span></a></p>
</div>

Au niveau de la partie css concernant ce bout de code,

Code css :

1
2
3
4
5
6
7
8
9
10
.event img,.affiche img
{
align:right;margin:5px auto 5px 5px;
border:1px solid #999999;
}
.event,.layout_teaser
{
display:block;
border-bottom:1px solid #fedcba;
}

L'on ma conseillé de mettre mes images en float:left, voici le résultat

Pourriez-vous me dire ce que je rate ?

[NoSmoking]

Bonsoir,
merci de nous faire profiter de la solution.