Faire un div obtenir au sommet d'un autre div

Question

Je fais un modèle, et je voudrais avoir un div que sa hauteur arrive au sommet d'un autre div. Une capture d'écran qui explique un peu:

Ceci est mon CSS:

.grid_1 { width:60px; } 
.grid_2 { width:140px; } 
.grid_3 { width:220px; } 
.grid_4 { width:300px; } 
.grid_5 { width:380px; } 
.grid_6 { width:460px; } 
.grid_7 { width:540px; } 
.grid_8 { width:620px; } 
.grid_9 { width:700px; } 

.column { 
    margin: 0 10px; 
    overflow: hidden; 
    float: left; 
    display: inline; 
} 
.row { 
    width: 720px; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.row .row { 
    margin: 0 -10px; 
    width: auto; 
    display: inline-block; 
} 

Et HTML:

<div class="row"> 
    <div class="column grid_9"><p><img src="img/bomb.gif" style=" margin-bottom: 10px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px;"> 
</p></div> 
</div> 

<div class="row"> 
    <div class="column grid_3"><p style="line-height: 222px;">TEST</p></div> 

    <div class="column grid_6"><p>post</p></div> 
    <div class="column grid_6"><p>post</p></div> 
    <div class="column grid_6"><p>post</p></div> 



</div> 
     <div class="row"> 
      <div class="column grid_3"><p>footer</p></div> 
      <div class="column grid_3"><p>footer</p></div> 
      <div class="column grid_3"><p>footer</p></div> 

    </div> 

jsFiddle link

Answer 1

Cette réponse était à l'origine par Eric:

jsFiddle working

Answer 2

Je devinai:

.grid_3 { 
    position: relative; 
    z-index: 100; 
} 

Answer 3

Si vous souhaitez aligner le dernier message à droite, vous pouvez faire deux choses

float:right; //may require parent to also float 
text-align:right; //to parent container 
right:0px; // need to change position first I believe 
margin-left:auto; // should push it to the right all the way 
margin-left:123px; //fixed amount 

Answer 4

utiliser juste .grid_6 {float: right} et cela devrait fonctionner.

Mise à jour:

Une pratique que je l'utilise est que je conclurai ces trois divs dans un autre div. Je ferais quelque chose comme

<div style="overflow: hidden"> 
<div style="float: left">TEST</div> 
<div style="float: right; overflow: hidden"> 
    <div>POST</div> 
    <div>POST</div> 
    <div>POST</div> 
</div> 
</div> 

Answer 5

jsFiddle

<div class="row"> 
    <div class="column grid_9"> 
     <img src="img/bomb.gif" style="margin-bottom: 10px; padding: 5px;"> 
    </div> 
</div> 

<div class="row"> 
    <div class="column grid_3"><p style="line-height: 222px;">TEST</p></div> 
    <div style="overflow: hidden"> 
     <div class="column grid_6"><p>post</p></div> 
     <div class="column grid_6"><p>post</p></div> 
     <div class="column grid_6"><p>post</p></div> 
    </div> 
</div> 

<div class="row"> 
    <div class="column grid_3"><p>footer</p></div> 
    <div class="column grid_3"><p>footer</p></div> 
    <div class="column grid_3"><p>footer</p></div> 
</div>