28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je souhaiterai dans une cellule d'une ligne d'un tableau pouvoir y afficher un div dans le bas de la cellule, sachant que la hauteur est variable.

voici mon code CSS + html mais le CSS ne fonctionne pas, c'est un point de départ...


td {
	height: 100px;			
	}
	
div.test {
	position: relative;
	height: 100%;
	}

div.3 {
	position: absolute;
	bottom: 0;
	}

---

<table>
  <tr>
  <td><div class="test">
  		<div class="1">col1 test <br />test <br />test <br />test <br />test <br />test <br />test <br /></div>
 		<div class="2">col2 item2</div>
      	<div class="3">col3 item3</div>
    </div> 
</td>
    <td><div class="test">
      <div class="1">col2 item1</div>
      <div class="2">col2 item2</div>
      <div class="3">col2 item3</div>
    </div></td>
  </tr>
</table>


le but est donc d'aligner "Col2 item3" dans le bas de la cellule, sachant que sa hauteur est fonction du contenu de l'autre cellule de la meme ligne...
J'ai souvent trouver la question, et pas de réponse correspondant à ce cas.

Une idée ?
merci d'avance !!

Moksa
++
Modifié par MoKsA (28 Jan 2008 - 17:45)
bonjour
personnellement, plutôt que mettre plusieurs div dans une cellule, je ferais plusieurs lignes car à ce moment tu as l'attribut vertical-align:bottom que tu peux mettre à la cellule de ton choix en donnant une class à td, par exemple : <td class="bas">
et css :
td.bas{vertical-align:bottom;}


sinon, il faut utiliser une position absolue je pense :
<td class="bas">

td.bas{position:relative}
td.bas div.3{position:absolute;bottom:0;}

Modifié par verdan (28 Jan 2008 - 18:26)