Unfortunately, I am unable to code this for you. I had intended just a quick peek at the forum before getting on with something I need to do.
Perhaps this short how-to will help.
One way to overlay content on top of other content is with CSS position:absolute. Use the top:... and left:... to specify the position, which position the overlaid content the specified number of pixels from where they're measuring form.
Where they're measuring from is the key for accurate positioning. They will measure from the first container (like a div tag) with a CSS positioning style other than position:static. If none such is on the page, they will measure from the body tag.
Unless a person wants to specify position from the body tag, a container with a CSS position other than static needs to be specified. I generally use position:relative.
Here is an example of the concept:
<!-- image of studio -->
<div style="position:absolute; top:3px; left:15px;">
<!-- program schedule -->
The top:3px of the position:absolute div positions the top of the div 3 pixels below the top of the position:relative div. And the left:15px positions the left of the position:absolute div 15 pixels from the left of the position:relative div.
For the position:absolute, bottom:... and right:... may be used instead of top:... and left:... if those would work better for you.
Hopefully, you can use the above to develop the code you need. Maybe others will find the concept helpful, also.