Problème de mise en page

Bonjour,

Alors voilà, cela fait maintenant un bon moment que je suis bloqué sur mon projet...

Je vous explique, je souhaiterai réaliser une mise en page comme suit :

textetextetexte
textetextetexte
imagetextetexte
imagetextetexte

Le code CSS que j'utilise est le suivant :

<style type="text/css">
#conteneur {
position: relative;
width: 714px;
height:auto;
text-align:justify;
background-color:#CCCCFF;
}
#image {
float:left;
vertical-align:bottom;
width: 345px;
height: 137px;
background-color: #99CCCC;
border:3px solid;
position:relative;
}
#calegauchebas {
background-color:#FF9966;
border:1px solid;
width:150px;
position:relative;
margin-bottom:0;
padding:0px;
}
</style>

Puis mon code HTML :

<div id="conteneur">Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Esstexte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte Essai de texte<div id="image"><img src="<?php echo $path; ?>/images/p_partPdt1-0SantaliaSanteInfos/visu3.png" width="345" height="137" /></div><div id="calegauchebas">calegauchebas</div></div>

Le résultat de mon code est le suivant :
- conteneur prend parfaitement l'espace souhaité
- le texte reste intégralement au dessus de mon image est ne coule pas sur sa droite.

Après plusieurs jours, j'avoue que je sèche !

Merci d'avance pour l'aide que vous pourrez m'apporter !
Modifié par Neoxtra (02 Apr 2009 - 09:28)

Hello,

Pour faire vite : il n'est pas possible de faire flotter une image "en bas".

Voilà voilà...

arghhhhhhhhhhhhhhhhhh

C'est tout de même bien dommage... Moi qui pensait que le CSS était ma seule alternative... au final je me retrouve sans solution ?

tu veux que ton image sois par dessus le texte ou juste tout en bas à gauche?

Neoxtra a écrit :
au final je me retrouve sans solution ?

Aucune solution pour faire couler du texte autour d'une image positionnée en bas à gauche d'un conteneur.

Par contre tu peux obtenir quelque chose qui y ressemble en séparant ton contenu en deux parties :

a écrit :
comme ça :

textetextetexte
textetexte.
imagetextetexte
imagetextetexte

au lieu de :

textetextetexte
textetextetexte
imagetextetexte
imagetextetexte

Modifié par BeliG (02 Apr 2009 - 11:05)

Reaper, je souhaite que mon image flotte en bas à gauche de mon texte et que ce dernier coule à droite de l'image.

BeliG, ta solution revient donc à gérer le texte en fonction de l'image. Mon objectif était d'exploiter à fond les CSS pour réduire mon travail. Mais si la seule solution est celle-ci, tant pis, je ferai ça manuellement...

Merci en tout cas. Je reste ouvert à toute autre proposition