Bakground qui déborde sous une image

Bonjour.
J'ai un petit souci sur un débordement de background que je n'arrive pas à fixer. Un truc tout bête...
Voici une image qui montrera mon problème.



Sur ma page j'ai la partie de gauche qui contient des infos et une image, elle est gérée par un float:left. Sur la droite, du texte et une partie citation, mais cette dernière déborde sur l'image.
J'ai positionné volontairement un "position:relative" pour que la citation passe par dessus l'image. Si je l'enlève, le background se place également derrière l'image. Voici le code CSS utilisé :

.bio-infos{float:left;width:240px;margin-right:5px;}
.bio-general{}
.blockquote{font-style:italic;padding:8px;background-color:#DFE2E7;border:1px dashed #121B22;}

Je voudrais donc que ma citation "blockquote" s'arrête également au niveau de mon texte et ne déborde pas derrière l'image.
Si vous avez des idées. Merci d'avance.
Modifié par PhilouMinety (02 Jun 2012 - 15:38)

J'ai simulé un petit code pour montrer le résultat auquel j'arrive, ça sera peut être plus clair.
http://jsfiddle.net/B4TnF/3/

Ce qui me gêne c'est que le background va sur l'ensemble des parties et non juste dans la div bio-general.
Modifié par PhilouMinety (02 Jun 2012 - 16:50)

Bonjour,

Essaie en mettant un margin-left : ...px ou ...% à ta classe blockquote !

Cordialement

Salut.
Ca marchera effectivement mais toutes mes autres blockquote auront une marge également du coup. Je me demande si je vais pas revoir la présentation, ça sera peut être plus simple Car là je vois pas.

Merci de ta réponse.
Modifié par PhilouMinety (02 Jun 2012 - 17:49)

Il te suffit de cibler plus particulièrement cette partie-là en ajoutant une seconde classe par exemple.
Ceci dit, l'utilisation de span pour des citations n'est pas des plus heureux.

Bonjour,

effectivement une citation longue utilise l'élément blockquote (avec des éléments de type bloc dedans, paragraphe pour commencer). Et une citation courte utiliserait l'élément q mais elle serait au fil du texte, ce n'est pas le cas ici.

Il m'est arrivé d'utiliser l'astuce de la bordure de la même couleur que la couleur de fond soit de la citation soit du reste du texte principal. Démonstration avec de la transparence rgba() pour mieux voir : http://jsfiddle.net/PhilippeVay/B4TnF/4/ (avec sémantique HTML améliorée : le texte qui suit la citation est dans un paragraphe et pas directement dans un div à la sémantique nulle, la citation est dans un blockquote > p et les 3 textes sont différents, ne commencent pas tous par un lorem ipsum parce que je ne m'y retrouvais pas )

Sinon un truc qui fonctionne bien c'est overflow: hidden sur un élément pouvant cotoyer des flottants (ici sur la citation). Attention ça a d'autres conséquences majeures pas forcément visibles tout de suite.
Modifié par Felipe (03 Jun 2012 - 14:04)

Bonjour.
Et bien Merci Felipe pour ta réponse très détaillée. Je vais faire quelques tests à partir de ce que tu m'as indiqué. Pour le overflow:hidden, je l'avais tenté mais ça ne marchait pas très bien. Mais bon je l'avais peut être mal utilisé.

Je vous tiens au courant.
Merci en tout cas!