I have three child divs inside a parent div and I'm looking to distribute the height of the parent div evenly among the three children.
Here is the HTML code:
<div class="frameright">
<div class="divright">
<table class="right" id="andamento">
<caption style="text-align:left">Em Andamento()</caption>
<thead>
<tr>
<th>Chamado</th>
<th>Atividade</th>
<th>Titulo</th>
<th>Inicio</th>
<th>Hora</th>
<th>tempo</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="divright">
<table class="right" id="aberto">
<caption style="text-align:left">Aberto()</caption>
<thead>
<tr>
<th>Chamado</th>
<th>Atividade</th>
<th>Titulo</th>
<th>Abertura</th>
<th>Previsão</th>
<th>Dias</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="divright">
<table class="right" id="encerrado">
<caption style="text-align:left">Encerrado()</caption>
<thead>
<tr>
<th>Chamado</th>
<th>Atividade</th>
<th>Titulo</th>
<th>Inicio</th>
<th>Hora</th>
<th>Conclusão</th>
<th>Hora</th>
<th>Tempo</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
And here is the CSS:
html{margin:1px;}
body{font-size:70%;margin: 0px;}
p{font-size:medium;}
html,body{font-family:Verdana, Geneva, Tahoma, sans-serif;overflow:hidden;height:98%;}
table{border-spacing: 1px;}
table thead tr th{width:2%;background: #2F75B5;font-weight: normal;padding: 2px 3px;color:#FFFFD4;}
table tbody tr td{z-index:0;background-color:#DDEBF7;min-width:1%;}
table.right{margin: 5px 0 0 0;max-height: 33%;}
table.right tbody td:hover {background-color:#79B7E7}
table.right tbody tr:hover td{background-color: #79B7E7}
.blue{background-color: #79B7E7}
.red{background:#F08080;font-weight:normal;}
.green{background-color:#60CA8F;font-weight:normal;}
.number{text-align:right;}
I am seeking assistance on how to equally distribute the height between these three div elements. Can anyone provide guidance?