As a Moodle theme designer, I get sent screenshots that look like this all the time:
Along with the screenshot, I typically get a message that goes something like this:
There seems to be a bug in your theme causing the sideblocks to run outside the right margin of the background.
Of course, I have a quick response:
This is not a bug, but rather the result of adding a banner (images, table, etc.) that is too wide. Consider reducing the size of your banner.
It can’t be me. It must be you.
Then this past Friday, I had a client ask why I couldn’t make it look like this when a banner was too wide:
(Note the reduced margin on the right with blocks fully encased.)
That was a really good question that I had never really asked myself. So, I started to search for answers.
What I learned was basically this:
The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing – and it often is – but it makes it possible for oversized content to make text unreadable or completely break a site’s layout, especially in Internet Explorer. Source: 456 Berea Street
Ok, so once I knew what was causing the problem – Moodle’s outdated use of tables in its layout – I just had to figure out how to fix it. I thought, “If the layout table is breaking the width of its parent DIV (and I can’t get rid of the layout table), how can I recode my theme to prevent this break from occurring?”
My solution is neither pretty nor brilliant, but it does work:
Stop wrapping the layout-table inside a DIV. Wrap it inside another table instead.
Tables don’t break the width of parent tables; they expand the width of parent tables. If you wrap the layout-table inside a single-celled table, then add your margin values to that table, you’re set.
Here’s is an example of how I once did things:
<div id="page">
<div id="content">
<table id="layout-table">
<tr>
Here’s an example of how I would change that code now:
<table id="page">
<tr>
<td>
<div id="content">
<table id="layout-table">
<tr>
By using the same ID, my CSS didn’t have to change a bit:
#page {
margin:15px 10% 0;
}
I realize that this is an ugly hack – the legitimate solution is to eliminate the use of tables in the layout of Moodle altogether. This is coming in Moodle 2.0. In the meantime, this is an easy fix to keep your content inside the page!
