[CSS] plaçer une image en bas à gauche d'une div ?

plaçer une image en bas à gauche d'une div ? [CSS] - HTML/CSS - Programmation

Marsh Posté le 22-09-2003 à 15:33:51    

Bonjour !
 
Excusez ma newbitude, j'ai du mal à intégrer le positionnement en css :/
 
J'ai doc une div, dont la hauteur varie en fonction du texte qu'elle contient ;  et j'aimerai qu'une image vienne se coller à l'extérieur de cette div, en bas à gauche.  
 

Code :
  1. ________
  2.         |bla   |
  3.         |bla   |
  4.         |bla   |
  5.         |bla   |
  6.      ___|bla   |
  7.     |img|bla   |
  8.     |___|______|


 
mon problème c'est que je n'arrive pas à faire en sorte que la div de gauche adopte la même hauteur que celle de droite. Avec mon code la div de gauche prends la hauteur de mon image... que dois-je modifier pour arranger ça ? voici mon code :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6.   <title>Test</title>
  7.   <style>
  9.   div.conteneur {
  10.   width : 100%;
  11.   }
  13.   div.gauche {
  14.    position : absolute;
  15.    left : 0px;
  16.    width : 20%;
  17.    height : 100%;
  18.    background-color : #EEAA22;
  19.    vertical-align : bottom;
  21.   }
  23.   div.droite {
  24.    position : absolute;
  25.    left : 20%;
  26.    width : 40%;
  27.    background-color : #CCEEBB;
  28.   }
  29.  
  30.   img.icon {
  31.    float : right;
  32.    height : 50px;
  33.    width : 50px;
  34.   }
  36.   </style>
  37. </head>
  39. <body>
  41.   <div class="conteneur">
  43.    <div class="gauche">
  44.     <img class="icon" src="icon.gif" alt="icone" />
  45.    </div>
  47.    <div class="droite">
  48.    bla bla bla <br />
  49.    bla bla bla <br />
  50.    bla bla bla <br />
  51.    bla bla bla <br />
  52.    bla bla bla <br />
  53.    bla bla bla
  54.    </div>
  56.   </div>
  58. </body>
  59. </html>


 
Merci de votre aide :)


Message édité par Gnub le 22-09-2003 à 15:49:35
Reply

Marsh Posté le 22-09-2003 à 15:33:51   

Reply

Marsh Posté le 22-09-2003 à 15:51:46    

Moi je mettrais tout dans le même <div> avec un backround position en bottom left
http://www.w3schools.com/css/pr_ba [...] sition.asp
 
Un petit coup de padding-left pour que ton texte ne bouffe pas sur le background.

Reply

Marsh Posté le 22-09-2003 à 16:08:08    

merci beaucoup, ça marche parfaitement !
le seul inconvénient, c'est que je n'ai pas la bordure de la div entre l'image et le texte, mais ce n'est pas très grave.
 
Un grand merci ! :)


Message édité par Gnub le 22-09-2003 à 16:08:25
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed