tutorials.de - Tabellengröße "FIXIEREN"

HTML

<ul>
    <li>
      <div title="BlaBlaBla1"></div>
    </li>
    <li>
      <div title="BlaBlaBla2"></div>
      <div title="BlaBlaBla3"></div>
      <div title="BlaBlaBla4"></div>
    </li>
    <li>
      <div title="BlaBlaBla5"></div>
      <div title="BlaBlaBla6"></div>
      <div title="BlaBlaBla7"></div>
    </li>
</ul>

CSS

*, *::before,*::after
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul
{
	width: calc(100% - 20px);
	height: 400px;
	display: table;
	margin: 10px;
	padding: 0;
	background-color: #357;
}

ul > li
{
	display: table-cell;
	vertical-align: top;
}

ul > li:nth-child(1)
{
	width: 50%;
	height: 100%;
}

ul > li:nth-child(1) > div
{
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	border: 7px solid #FFFFFF;
	margin: 7px 7px 7px 7px;
	background-image: url("http://lorempixel.com/600/600/transport/4");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

ul > li:nth-child(2)
{
	width: 16%;
	height: 100%;
}

ul > li:nth-child(2) > div:nth-child(1)
{
	width: 100%;
	height: calc((100%/3) - 7px);
	border: 7px solid #FFFFFF;
	margin: 7px 0px 0px 0px;
	background-image: url("http://lorempixel.com/600/400/city/1");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

ul > li:nth-child(2) > div:nth-child(2)
{
	width: 100%;
	height: calc((100%/3) - 14px);
	border: 7px solid #FFFFFF;
	margin: 7px 0px 7px 0px;
	background-image: url("http://lorempixel.com/600/400/food/4");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

ul > li:nth-child(2) > div:nth-child(3)
{
	width: calc(100%-7px);
	height: calc((100%/3) - 7px);
	border: 7px solid #FFFFFF;
	margin: 0px 0px 7px 0px;
	background-image: url("http://lorempixel.com/600/400/animals/8");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

ul > li:nth-child(3)
{
	width: 32%;
	height: 100%;
}

ul > li:nth-child(3) > div:nth-child(1)
{
	float: left;
	width: calc(50% - 14px);
	height: calc((100%/3) - 7px);
	border: 7px solid #FFFFFF;
	margin: 7px 7px 7px 7px;
	background-image: url("http://lorempixel.com/600/400/city/7");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

ul > li:nth-child(3) >...