Create quadrants inside container

I’m trying to create four quadrants inside the container on a page. This is what I would like it to look like.

I built quadrants using

.tl { position: absolute; top: 0; left: 0; right: 60%; bottom: 40%;}
.tr { position: absolute; top: 0; left: 40%; right: 0; bottom: 40%;}
.bl { position: absolute; top: 60%; left: 0; right: 40%; bottom: 0;}
.br { position: absolute; top: 60%; left: 60%; right: 0; bottom: 0;
      background: #C0C0C0; }

but I can’t get them to expand with the content. Anyone have an idea? I have a test page here. Thanks.