I know this may not be what you want to hear, but to be honest, I would go in a completely different direction. This highlights something I'd like to add: a free-form layout mode, where you can create elements, size them, and drag them around the screen to exactly where you want them. Someday...
Anyway, this "mode" of designing a layout makes a lot more sense for your layout. What you are trying to do essentially is put some elements on top of a background picture, and those elements need to be in specific places to make things look right. You can actually do this today, it's just more of a manual process.
So, instead of adding columns and rows, and tweaking things to make them line up exactly where you want them, I would create some cells and make the contents of those cells positionable anywhere, then position them at exact coordinates. This will only work for specific screen sizes, but your background image really only works for specific screen sizes anyway (meaning, if you set this up for 1280x1024, it's not going to look right for 1024x768, or 1920x1080, etc.)
Unfortunately I don't have time to do the whole thing right now, but I've gotten you started. See the attached layout. I have created a new screen and 4 new cells. I have labeled the screen and the cells starting with the letter "Z" just to differentiate them from your existing cells and screens and group them together. The background is 1280x1024, so the screen I created is designed for that size exactly. Basically, each cell I created can go anywhere in the layout, because the contents of the cell "detach" and position themselves in a specific location. For example, the contents of the cell for the blinds on the left are:
<div style="position: absolute; top: 100; left: 30; height: 610px; width: 100px; overflow: hidden; text-align: center">
<div style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); text-align: center; width: 610px">
<nobr>Blinds - <smallblind> / <bigblind><br>
<div style="font-size: 15pt">
<nobr>Next - <nextsmallblind> / <nextbigblind><br>
Break in <nextbreak format="clock" showSeconds="false"> minutes</nobr>
</div>
</div>
</div>
The outer div sets the location and exact size of the contents. The next div rotates the contents. Then we have the actual contents.
If you want to have a better look at what's going on, try adding this style:
<div style="position: absolute; top: 100; left: 30; height: 610px; width: 100px; overflow: hidden; text-align: center; background-color: red">
<div style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); text-align: center; width: 610px">
<nobr>Blinds - <smallblind> / <bigblind><br>
<div style="font-size: 15pt">
<nobr>Next - <nextsmallblind> / <nextbigblind><br>
Break in <nextbreak format="clock" showSeconds="false"> minutes</nobr>
</div>
</div>
</div>
See what that does, then add another one:
<div style="position: absolute; top: 100; left: 30; height: 610px; width: 100px; overflow: hidden; text-align: center; background-color: red">
<div style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); text-align: center; width: 610px; background-color: blue">
<nobr>Blinds - <smallblind> / <bigblind><br>
<div style="font-size: 15pt">
<nobr>Next - <nextsmallblind> / <nextbigblind><br>
Break in <nextbreak format="clock" showSeconds="false"> minutes</nobr>
</div>
</div>
</div>
Hopefully that will be enough to get you started.