Image et div

Hello à tous,

Je me trouve confronté à un petit problème, j'ai plusieurs div qui composent mes différents blocs. Mais le problème est que quand j'ajoute une image dans ce div, l'image dépasse.

Exemple :

http://www.calipanpan.ch/divers/bloc.jpg

Le html :

Code:

---

1 2 3

<div> <img src="images/welcom_receptionpetit.jpg" height="173" width="130" class="left" alt="" / >Depuis bientôt 10 ans, l’hôtel a diversifié son activité et se consacre principalement à la formation hôtelière. Nous permettons ainsi à nos étudiants d’être chaque jour en contact direct avec la clientèle. Ceci encourage nos collaborateurs à maintenir une rigueur, un savoir-faire ainsi qu’une tenue toujours professionnelle.</p></div>

---

CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#content div { border: 1px solid #000000; padding: 0 10px 0 10px; line-height: 1.6em; text-align: left; border-bottom:solid; }     #content img { padding: 1px; display:block; background: #cccccc; border: 4px solid #f0f0f0; }

---

Si quelqu'un à une idée, ce serait volontiers.

Merci d'avance

Calipanpan

Code:

---

1 2	<div> <img src="" alt="" / >Depuis...</p></div>

---

ca me parait bizarre cette balise...
peut etre que c'est ca qui te fout en l'air ton css...

On peut avoir le CSS entier ainsi que le HTML entier ?
Parce que là, difficile de tester avec des morceaux qui n'ont rien à voir avec le CSS.

Au passage, comme dit MasterOfChakhaL, tu as </p> qui traine on ne sait pourquoi, et en plus, tu as border-bottom:solid; en trop dans ton CSS. Bien sûr ça ne résoudra pas ton problème.

Le class="left" sur l'image est, je suppose, un float:left ?
Il faudrait onc faire intervenir la propriété clear. Par exemple en rajoutant ceci dans ton css:

Code:

---

1 2 3 4 5 6 7

#content div:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

---

et, au besoin, rjouter ceci juste à l'attention de IE:

Code:

---

#content div {height:1%;}

---

Autrement il y a aussi l'otpion d'ajouter un div, hr ou br avec le clear:both, juste avant la clôture de ton div.

MasterOfChakhaL => Excuse moi, pour le </p> c'était une erreur de report dans le forum, mais je ne l'avais pas dans mon code.

BisounoursJos => Je n'ai volontairement pas tout mis car j'ai vu dans d'autres postes que certain se sont fait incendier car il avait mis des kilomètre de code. Mais la prochaine fois je ferai un zip et je mettrai le tout.

Candygirl =>Merci ta solution à bien à résolu mon problème dans IE. En fait juste en rajoutant le

Code:

---

#content div {height:1%;}.

---

Mais dans firefox, en rajoutant tout ce que tu m'as dis, j'ai un énorme espace à la fin de mon premier bloc.

http://www.calipanpan.ch/divers/bloc2.jpg

Et pour la class left, c'est bien un float: left :

Code:

---

1 2 3 4

.left { margin: 10px 10px 5px 0; float: left; }

---

En tout cas merci déjà à tous pour votre aide.

Si vous avez encore une idée pour firefox, c'est volontiers. Mais je vais aussi essayer de chercher de mon coté.

Calipanpan

Euh, ton grand espace, il va jusqu'au bas d'un menu que tu aurais mis à gauche ou à droite en float, avec le contenu positionné avec la technique des marges ?

Si tu pouvais montrer la structure complète de ta page ou un lien pour voir plus en détail le problème...

Une habitante des environs du Mont-Pèlerin, déjà allée à l'hôtel du Parc plus d'une fois ;)

Quand tu dis environ tu parles pas de chatel par hasard?

Je connais une candy à chatel. ;)

http://www.calipanpan.ch/divers/hotel.zip

@++

Perso, je placerais le content aussi en float:

Code:

---

1 2 3 4 5

#content { width:468px; float:left; margin: 0 0 20px 10px; }

---

De cette manière tu n'auras plus le problème du clear qui agit sur le menu et plus de bug des 3px sur IE.

Non, j'suis sur Vaud et Candy n'a rien à voir avec mon prénom ;)

Merci beaucoup!!

Ca fonctionne merveilleusement bien.

Ca fait plaisir de discuter avec des personnes de la région des fois. Ce qui est quand même assez rare sur des communautés françaises. ;)

Bonne journée et à une prochaine peut-être.

Calipanpan