Discussion :

[Colbix]

Bonjour à tous,

Voici mon problème : j'aimerais placer deux div dont les hauteurs sont différentes l'un à coté de l'autre en les alignant sur le bas.

Voici ce que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<table width="100%"><tr valign="bottom">  
  <td width="1000px"><div id="div_header" /></td>  
  <td><div id="div_header_bg" /></td>  
</tr></table>

ps : le div_header a une hauteur de 150px et le div_header_bg a une hauteur de 50px.

Même avec des valign="bottom", le div de droit (qui est le plus petit) reste aligné au dessus.

Que faire ? Si vous avez un moyen de n'utiliser que les div, je suis partant aussi . Genre avec les float align etc .

Merci d'avance.

[Bisûnûrs]

En utilisant le CSS et non pas les tableaux de mise en page, ce n'est possible qu'à coups de position:relative/absolute. Donc en fonction du besoin, cette méthode pourrait être bien/moins bien.

En ce qui concerne ton tableau de mise en forme, le valign se met sur le td et non le tr.

[Colbix]

En utilisant le CSS et non pas les tableaux de mise en page, ce n'est possible qu'à coups de position:relative/absolute. Donc en fonction du besoin, cette méthode pourrait être bien/moins bien.

En ce qui concerne ton tableau de mise en forme, le valign se met sur le td et non le tr.

Merci pour ta réponse . Je vais utiliser une autre technique... Il n'y a rien a faire, les div son trop limités. je vais retourner à mes tables bien aimées .

Pour le valign : En effet, j'ai poster un bout de code de test. sorry...


++

[Macmillenium]

C'est possible en appliquant un display:inline-block sur tes deux DIV, ce qui permet de les aligner verticalement à l'aide de vertical-align:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.col { 
   display:inline-block; 
   vertical-align:bottom;
   width:350px
}

Pour émuler inline-block sur IE7- (le comportement est décrit ici (en)), il faut conférer le layout + appliquer un display:inline.
Code à placer dans le HEAD entre commentaires conditionnels:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<!--[if lte IE 7]>
<style type="text/css" media="screen">
   .col { 
      zoom:1;
      display:inline
   }
</style>
<![endif]-->

Et le HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div class="container">
   <div class="col">
      bla <br /> bla
   </div>
   <div class="col">
      bla
   </div>
</div>

[Colbix]

Merci beaucoup

C'est bon

J'ai aussi essayé avec des margin-top et ca marche .

++