CODEWITHSUNDEEP
htmlcss
Erik
Erik

Reputation: 14750

How to stretch vertical div element to fill parent container?

I have the following JS Bin

<div class="container">
  <div class="column">
    <div class="cell">Top left</div>
    <div class="cell">Top left bottom</div>
  </div>
  <div class="column">
    <div class="cell">Center</div>
  </div>
  <div class="column">
    <div class="cell">Top right</div>
    <div class="cell">Top right bottom</div>
  </div>
</div>

How can I make vertical aligned divs without explicit setting of height and position to absolute to look like the following:

EDIT: Please don't suggest me using of tables because I need to resolve my problem in the example above.

enter image description here

Upvotes: 0

Views: 255

Answers (2)

tewathia
tewathia

Reputation: 7298

Add this to your stylesheet:

.column:nth-child(2) .cell {
    padding-bottom: 18px;
}

DEMO

Upvotes: -1

Danield
Danield

Reputation: 125443

How about using CSS tables with your current markup:

FIDDLE

CSS

.container {
    display: table;
}

.column {
    display: table-cell;
    vertical-align: top;
}

.cell {
    border: 1px solid #000;
    width: 100px;
    font-size: 13px;    
}
.column:nth-child(2)
{
    border: 1px solid #000;
}
.column:nth-child(2) .cell
{
    border: none;
}

Upvotes: 2

Related Questions