Joomla template – spacing columns

[s300pmu1]

I have a Joomla site running on a template generated in Artisteer, which I customized a bit as well by placing overriding css rules in a custom.css file. It has quite some structure, which I have explored with Firebug for some time while customizing.

There are two kinds of pages on my site: front page with a single-column layout, and other pages with a three column layout. Left and rightmost columns have fixed width, central column (the one with the main content) should be flexible to take up the remaining space. As far as I can tell, leftmost column is described by a class of .sidebar1, rightmost – .sidebar2, and central – .art-content.

I want to have some visual spacing between the columns. I achieved it with the left column by adding margin-right to the .art-vmenublock-body which defines the vertical menu block in the left column.

However, increasing the whitespace between central column and right sidebar is too complicated for me.
I tried increasing right marginpadding for the central column and left marginpadding for the right column, to no avail.
I also tried reducing the width of central column (specified in %), but then the rightmost column widens to take up the space (perhaps, as it is defined also by the .art-layout.cell .sidebar2, and I’m setting the art-layout-cell width), although its width is explicitly specified in px. Clearly, this is a result of a complex css rule interation that I do not grasp.

Using padding on the Joomla article itself would be a very attractive way out, but
(1) on the front page I need to have the maximum article width, so padding is out
(front page has “.art-layout-cell .wide” classes, “.wide” being “width: 100%”, so setting .art-layout-cell width to less than 100% has no negative effect on the main page but works on pages with sidebars – however, as noted above, right sidebar expands to use the space freed; but setting padding as opposed to central column width affects all pages, so padding appears alsop on the front page)
(2) it’s a workaround which is not optimal; optimal would be to understand why margin-right of div.art-layout-cell.art-content or its children, or, alternatively, margin-left of .art-sidebar2 do not seem to work, and fix it.

So I’d be very grateful to any person who would be kind enought to spend several minutes of his valuable time with Firebug on the sample page:
Frontpage with content width set as 100px and no sidebars
Page with three columns where column spacing has to be altered

and help me figure out how to increase spacing between central and righmost column without affecting the display of the content on the front page.

[s300pmu1]

Anybody?

[Author]

Posts