full height of a div inside a table - html

Question

Is it possible to align the following div's to be always on same position width and height on any webpage? I have try anything but I cannot manage to get it working. Something is not compatible in my code.
.content-box-gray .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid gray;
color: #3385FF;
}
.content-box-gray .title {
height: 30px;
line-height: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: gray;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: white;
display: block;
padding: 10px;
border: 1px solid gray;
border-bottom: none;
}
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td colspan="2" rowspan="3">
<div class="content-box-orange">
<div class="titleorange">3</div>
<div class="content">Lorem Ipsum is simply dummy text</div>
</div>
</td>
</tr>
<tr style="height:100% ">
<td style="background-color: aqua;height: 50%">1</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50%">2</td>
</tr>
<tr>
<td colspan="3" style="background-color: #FFF">4</td>
</tr>
<tr>
<td style="background-color: #FFF">5</td>
<td colspan="2" rowspan="2">
<div class="content-box-gray">
<div class="title">7</div>
<div class="content">Lorem Ipsum</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFF">6</td>
</tr>
</tbody>
</table>
jsfiddle
I cannot manage to fix it.
here is a pic alignment of divs
thank you very much!

Answer 1

Give the td a height of 100%. Then use the calc property to set the height of .content-box-orange .content
fiddle
I think that you could explore flexbox instead of table for this layout. Update your question if you are open to that...
html,
body {
height: 98%;
background-color: #E5E5E3
}
table tbody tr td {
height: 100%;
}
.content-box-gray .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #3385FF;
background: #FFFFFF;
}
.content-box-gray .title {
height: 30px;
line-height: 30px;
background: #F1F1F1;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #464648;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
.content-box-orange {
height: 100%;
}
.content-box-orange .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #000;
background: #FFFFFF;
height: calc(100% - 66px);
}
.titleorange {
height: 30px;
line-height: 30px;
background: #F78D27;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #FFF;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td colspan="2" rowspan="3">
<div class="content-box-orange">
<div class="titleorange">3</div>
<div class="content">Lorem Ipsum is simply dummy text</div>
</div>
</td>
</tr>
<tr style="height:100% ">
<td style="background-color: aqua;height: 50%">1</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50%">2</td>
</tr>
<tr>
<td colspan="3" style="background-color: #FFF">4</td>
</tr>
<tr>
<td style="background-color: #FFF">5</td>
<td colspan="2" rowspan="2">
<div class="content-box-gray">
<div class="title">7</div>
<div class="content">Lorem Ipsum</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFF">6</td>
</tr>
</tbody>
</table>
Using Flexbox
Here is a rough guide to achieving the layout in your image using flexbox. Refer to caniuse for browser compatibility information. You can toggle properties in Chrome Dev tools to get an idea of how flexbox properties work if it's new to you.
fiddle
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
}
body {
background: #FFF;
font-family: sans-serif;
height: 100%;
margin: 0;
padding: 5px;
}
.box,
.main {
border: 5px solid #43c2eb;
}
.title--orange {
background: orange;
text-align: center;
padding: .4em;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
display: flex;
min-height: 200px;
flex: 1 1 auto;
}
.box-wrap {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.box {
margin: 5px;
display: flex;
flex-direction: column;
}
.box--big {
flex: 2 1 auto;
}
.box--small {
flex: 1 1 auto;
}
.main {
align-items: center;
justify-content: center;
margin: 5px;
}
.content {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
}
<div class="wrapper">
<div class="row upper">
<div class="box box--big">
<h1 class="title--orange">div header</h1>
<div class="content">
content
</div>
</div>
<div class="box-wrap">
<div class="box box--small">
<div class="content">content</div>
<h2 class="title--orange">div header</h2>
</div>
<div class="box box--small">
<div class="content">content</div>
<h2 class="title--orange">div header</h2>
</div>
</div>
</div>
<div class="row main">
<div class="main__inner">content</div>
</div>
<div class="row lower">
<div class="box-wrap">
<div class="box box--small">
<div class="content">content</div>
</div>
<div class="box box--small">
<div class="content">content</div>
</div>
</div>
<div class="box box--big">
<h1 class="title--orange">div header</h1>
<div class="content">
content
</div>
</div>
</div>
</div>

Answer 2

Remove style attributes and width,height attributes on your HTML code, no need it if you use CSS.
Also dont use % on Width y if you want a static table.
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tr style="height:100% ">
<td style="background-color: aqua;height: 50%">1</td>

Answer 3

Give style="height:100%;overflow:hidden;" to outer div and style="height:100%;" to content & td
html,
body {
height: 98%;
background-color: #E5E5E3
}
.content-box-gray .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #3385FF;
background: #FFFFFF;
}
.content-box-gray .title {
height: 30px;
line-height: 30px;
background: #F1F1F1;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #464648;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
.content-box-orange .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #000;
background: #FFFFFF;
}
.titleorange {
height: 30px;
line-height: 30px;
background: #F78D27;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #FFF;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td colspan="2" rowspan="3" style="height:100%;">
<div class="content-box-orange" style="height:100%;overflow:hidden;">
<div class="titleorange">3</div>
<div class="content" style="height:100%;">Lorem Ipsum is simply dummy text</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50px">1</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50px">2</td>
</tr>
<tr>
<td colspan="3" style="background-color: #FFF">4</td>
</tr>
<tr>
<td style="background-color: #FFF">5</td>
<td colspan="2" rowspan="2" style="height:100%;">
<div class="content-box-gray" style="height:100%;overflow:hidden;">
<div class="title">7</div>
<div class="content" style="height:100%;">Lorem Ipsum</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFF">6</td>
</tr>
</tbody>
</table>