Сделать div, чтобы добраться до вершины другого div

Question

Я делаю шаблон, и я бы хотел, чтобы его div достигал вершины другого div.Снимок экрана, который объясняет это немного:

Это мой 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;
}

И 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

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>

Answer 2

Просто используйте .grid_6 {float: right}, и оно должно работать.

Обновление:

Практика, которую я использую, заключается в том, что я оборачиваю такие три элемента в другой элемент. Я бы сделал что-то вроде

<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 3

Этот ответ изначально был Эрик :

jsFiddle working

Answer 4

Если вы хотите выровнять последний пост справа, вы можете сделать пару вещей

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 5

Я догадался:

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