Div en float left qui passe à la ligne à cause du texte [Résolu]

[lina01]

Bonjour à tous,
je voudrais mettre 2 divs cote à cote, l'un avec une image (dont la taille peut varier) et l'autre avec un texte sur plusieurs lignes.
Cela fonctionne bien si les divs (ou au moins celui du texte) ont une taille définie, mais je ne peux pas la définir car mon image peut changer de taille, je voudrai que la largeur du div s'adapte à la largeur qu'il lui reste dans le div de contenu.
Pour être plus claire, voici un exemple :
http://nekobaka.org/test_divs.html
Existe-t-il une solution ?
Merci d'avance pour votre aide.

[ornitho13]

Salut,

pourquoi utiliser des <div> pour cela ?
intègre ton image dans la div de ton texte et met le float:left sur l'image :

Code html :

1
2
3
4
5
6
7
 
<div id="contenu">
   <div id="gauche">
      <img src="..." />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae eros a libero tincidunt suscipit eget vitae tellus. Phasellus facilisis rutrum lectus ac rhoncus. Sed a sem eget massa lacinia egestas sed at ligula. Suspendisse eu nisi non risus adipiscing sagittis. Praesent tempus interdum ante vitae tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc facilisis nibh justo, ut dignissim velit. Aenean sodales nibh ac sapien ultrices placerat. Nullam eget augue lobortis nisl tincidunt semper quis vitae dolor. Donec metus erat, congue eget facilisis quis, sagittis non dui. Mauris lacinia leo sed nulla placerat consectetur pulvinar est sollicitudin. Quisque tellus magna, elementum non tincidunt sed, rhoncus eget augue. Praesent ipsum urna, varius id pulvinar sit amet, tempor a magna. Maecenas a eros risus, et convallis lorem. Suspendisse ac mi sapien, id bibendum ante. Nunc vitae nulla nec tortor hendrerit aliquet. Maecenas in tellus non ipsum semper cursus et et orci.
   </div>
</div>

Et ainsi tu utilises le CSS suivant (je me base sur ton existant) :

Code css :

1
2
3
4
5
6
7
8
9
10
11
 
#contenu {
   background-color: #9C3;
   width: 800px;
}
#gauche {
   border: 1px solid lime;
}
#gauche img{
   float: left;
}

[lina01]

Merci pour ta réponse,
En fait j'utilise des divs car mon interface est plus complexe que ça, il n'y a pas que l'image dans le div de droite, il y a aussi quelques lignes de texte et un bouton, c'était juste pour garder un exemple simple sans polluer avec le reste du code

[ornitho13]

A ce moment, il serait préférable que tu exposes tout le code HTML de cette partie, ainsi que le CSS.

[lina01]

ok, si ça peut aider
http://nekobaka.org/div/index.php

[ornitho13]

Dans ton <div class="col_droite">, supprime les <div class="cleaner">, il ne te restera plus qu'à mettre à jour un peu le style pour qu'on puisse voir les quotes.

Il faut aussi mettre à jour cette instruction (supprimer le float) :

Code css :

1
2
3
4
5
6
7
8
9
 
#col_gauche .bloc_reservation .col_droite {
padding-left: 39px;
background-image: url(../images/quotes.png);
background-repeat: no-repeat;
background-position: 8px 27px;
margin-top: 20px;
margin-bottom: 20px;
}

[lina01]

ça résout le problème du div qui passe à la ligne, par contre je ne vois pas comment placer les quotes car selon la taille de l'image affichée à gauche, elles vont bouger

[Candygirl]

Hello,

Si le but est d'éviter que ton texte ne passe sous ton image, tu peux attribuer à col_droite une propriété qui induit un nouveau contexte de formatage. Par exemple:

Code :

.col_droite {overflow:auto;}

Par contre tu as visiblement du contenu qui dépasse de ta colonne vu l'apparition de la scroll-bare, donc à voir pourquoi et si c'est adaptable ou non.

[lina01]

merci à tous les deux
En effet c'est bien l'overflow qui me manquait, la scrollbar était due à des largeurs que j'avais définies en attendant de trouver une meilleure solution.