CSS vertical height justification

Question

Please help with auto vertical height for div or li elements via CSS. When I do this with table:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="5" height="600">IMG width=100% height=auto</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    </tr>
     <tr>
    <td>3</td>
    </tr>
     <tr>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    </tr>
</table>

as an example, every cell in the right column has 1/5 of the left cell's height. How can I do this without table and only with div or li elements? The left cell's height is not known; the element is responsive.

Like [this](http://jsfiddle.net/MG2Dh/1/) ? – Sirko May 31 '14 at 10:52 — Sirko, May 31 '14 at 10:52
Not quite see it http://jsfiddle.net/MG2Dh/5/ – Um-ko May 31 '14 at 11:33 — Um-ko, May 31 '14 at 11:33

score 0 · Answer 1 · answered May 31 '14 at 11:03

<div style="width:100%;border:1px solid red;">
    <div style="width:50%;height:100px;float:left;line-height:227px">test</div>
    <div style="width:49%;float:right;border:1px solid red;">
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
    </div>
    <div style="clear:both"></div>
 </div>

In your code the height of left div has fix-height 250px. I don't know in advance the height of the element. See http://jsfiddle.net/MG2Dh/2/ the right div.preview have no full height. — Um-ko, May 31 '14 at 11:11

score 0 · Answer 2 · answered May 31 '14 at 11:11

0

HTML

<div class="parent">IMG width=100% height=auto</div>
<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

CSS

div{   
    border:1px solid #ccc;
}
.parent {
    height:600px;
    float:left;
}
.parent div {
    height:19.7%;//must be 20%, but 19.7 is to accommodate 1px border 
}

Working Fiddle

answered May 31 '14 at 11:11

Bhavik

4,836
3
30
45

The height left div is not known, the element is responsive. If I knew the height of the element, then yes, this code is correct. – Um-ko May 31 '14 at 11:19
@Um-ko Merge my answer with some tricks *[this](http://stackoverflow.com/a/16270624/2260614)* or *[this](http://stackoverflow.com/a/2997838/2260614)* and finally *[faux columns](http://alistapart.com/article/fauxcolumns)*... And using *[`display:table and using display:table-cell I reached here`](http://jsfiddle.net/kF2b5/1/)* – Bhavik May 31 '14 at 12:01

CSS vertical height justification

2 Answers2