Balise <p> avec couleur de fond passe sous les images flottantes

BOnjour à tous,

voilà bien longtemps que je n'avais plus posté mais je me trouve davant un sérieux problème.


J'ai 2 images flottantes une à gauche, une à droite dans un bloc avec des paragraphes au milieu dont 1 avec un fond, le texte est corect mais la couleur de fond passe sous les images.

Je n'arrive pas à trouver la parade

Le lien de la page

h1 { font-size: 3.4em; width:auto; height:35px; line-height:35px; color:#97a9ba; margin:40px 0 0 0; padding:0; float:right; font-weight:100; }
h2 { font-size:1.9em; width:auto; height:26px; line-height:26px; vertical-align:middle; color:#97a9ba; margin:0; padding:5px 0 5px 0; }
h3 { font-size:1.1em; font-style:italic; margin:0; padding:0 0 7px 0; line-height:14px; width:auto; font-weight:200; }
hr { background-color:#97a9ba; }

.bloc-couv { width:775px; height:auto; margin:0; padding:10px; background-color:#FFFFF; }
#pied { width:100%; height:82px; margin:0; padding:0;  background-color:#FFFFFF; }

.illustration { width:265px; height:auto; margin:0; padding:0 20px 0 0; float:left; }
.menu-horizontal { font-size:1.2em; width:490px; height:40px; line-height:40px; vertical-align:middle; background-image:url(../../images/fond-menu-horizontal.png); margin:0; padding:0; display:block; position:absolute; top:180px; left: 295px; border-bottom-color:#97a9ba;  border-bottom-width: 2px; border-bottom-style: solid; }
.menu-horizontal a {  color:#333333; text-decoration:none; line-height:40px; width:auto; margin:0; padding:0 10px 0 25px; display:block; float:left;  }
.menu-horizontal a:hover {  color:#cfc9a4; text-decoration:none; }

.top { width:auto; margin:0; padding:0; line-height:13px; text-align:justify; }
.top-horaire { font-weight:bold; width:auto; height:auto; margin:7px 0 5px 0; padding:5px 0 5px 0;  background:#f2f2f2; text-align:justify;  }
.photo-droite { padding:7px; margin:0; float:right; border:none; display:block;  }

<div class="bloc-couv">
<img src="photos/couv-29.jpg" class="illustration" alt="la chapelle" />
<span class="menu-horizontal">
<a href="st_martin_events.php">Events</a>
<a href="expositions">Expositions</a>
<a href="sxm_artistes.php">Artistes</a>
<a href="cinema.php">Cinema</a>
<a href="art_news.php">News</a>
<a href="#">Agenda</a>
</span>
<h1>event</h1>
<p class="top">
<img src="spacer.gif" width="1" height="50" alt="" /><br />Soualig'art - Février 2007
</p>
<hr color="#97a9ba" noshade="noshade">
<p class="top">
<img src="photos/events/illus-29.jpg" class="photo-droite" alt="photo d'evenements a saint martin" />
</p>
<p class="top">
<h2>La Chapelle</h2>
<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra</h3>
<p class="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vel nulla. Fusce orci enim, aliquam ut, posuere in, convallis ut, felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam lorem eros, suscipit sed, ultrices sit amet, tincidunt et, massa. Ut placerat. Fusce eget metus et tortor aliquet rutrum.</p>
<p class="top-horaire">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vel nulla. Fusce orci enim, aliquam ut, posuere in</p>
</div>

Salut.

Ce sont des images fixes ? Si c'est le cas, tu connais leurs dimensions, et il suffit d'ajouter des marges appropriées à ton paragraphe

Non, elles ne sont pas fixes, à la limite je pourrais fixer la largeur de celle de gauche, mais celle de droite est appellé à changer de taille à chaque MAJ.

[hors sujet]Marrant, c quoi ton prénom, si c'est david, tu es mon homonyme [/hors sujet]