The Calendar block is bigger than the others, by 20 pixels. This is done through the preferred_width() mechanism; it just wants to be a little wider (but all other blocks on the same side will become wider as well).
The reason for this is that it's really not very nice aesthetically with 180px width; there's no space to cram all the colored borders and table columns and whatnot in there. So I figured that since we already have this mechanism in place, why not use it?
Now, what to do if we don't like the result? One thing could be to edit the block file and simply remove the function preferred_width(), end of story. Or you could edit your course format files to apply stricter restrictions to sideblock width (currently allowing 180 <= width <= 210). Or we could make a visual setting somewhere that forces all preferred_widths to be ignored (admin/visual settings or something).
I have to say though, that for cases such as this (put background image behind title), the best way seems to be anchoring the image at one corner and making it larger than necessary in size so that it can accomodate a widened title. This is basically standard procedure in every CSS styling technique, because there is no way to make sure that a box will have known dimensions beforehand if its contents are dynamic. It doesn't matter if it's a table cell or a div, you just cannot take it for granted. (Unless you size it explicitly and give it overflow: hidden, but that's not applicable to many cases).
Your screenshot shows styling which cannot be accomodated in a fluid-width design without table cells at first glance, but I 'm not sure that this is the end of it. Consider one of the lines where we have 3 columns side by side, and the center one is fluid to accomodate growth.
I believe you can do that just fine without tables as well. The technique is described in Douglas Bowman's superb Sliding Doors of CSS article, but the principle is this:
- The whole row is of course a DIV. Your main background image will be the left-hand starting graphic plus a "long" stretch of the center graphic, so as to be fluid. The right-hand graphic will be a separate image.
- Position your background at the top left of the div (top left of 1st column in your case), making sure it's longer than absolutely necessary to accomodate growth.
- Give horizontal padding to the div so that any text it might contain (it doesn't in this case, but just to be complete) doesn't get over the two nice side images (in effect, give it padding of as much as your two side cells are wide).
- Give the div position: relative, but do not otherwise mess with its positioning. This is required for the next step.
- Put another div inside this first one. This div will contain the right-hand graphic. Give this div position: absolute; top: 0px; right: 0px; and size it explicitly (you can do that, you know the exact dimensions of the right-hand graphic).
- That's all, you now have a flexible layout as the doctor prescribed without any tables.