CODEWITHSUNDEEP
htmlcss
Shihabu Rahman
Shihabu Rahman

Reputation: 119

align divs vertically top and some on bottom

I have three div elements to arrange vertically as follows

<table>
    <tr>
        <td>
            <div class="nb">
                <div class="top"></div>
                <div class="top"></div>
                <div class="bottom"></div>
            </div>
            <div class="dynamic">Height will change dynamically</div>
        </td>
    </tr>
</table>

Here the height of .dynamic will change dynamically. So the height of the td will be changed.
I want to stick .top on top of td, and .bottom on bottom of td.

Upvotes: 1

Views: 79

Answers (1)

sanoj lawrence
sanoj lawrence

Reputation: 993

try this ..

.nb {
  height: 1000px;
  position: relative
}
.top {
  float: top;
  width: 50px;
  background-color: grey;
  height: 50px;
}
.bottom {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute; 
bottom: 0;
}
<table>
  <tr>
    <td>
      <div class="nb">
        <div class="top"></div>
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
      <div class="dynamic">Height will change dynamically</div>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions