There are a few posts in the queue about adding padding and borders to a region, but they are not quite clear for 7.x-3.0. Say your content zone is 24-grid, sidebar first is 4-grid, content is 16-grid, and sidebar second is 4-grid. Then you add a div into region--content.tpl.php and add your padding and border to that. Then inside of a node, you need to have 2 columns, so you use grid-8 alpha and grid-8 omega. Well now your content region is not 16-grid anymore because you added padding, so your grid-8 omega block shifts down. How do you accomplish this with still being about to use grid-8 alpha and grid-8 omega?


JSCSJSCS’s picture

I think I know what you are asking. I saw something similar a few months ago at It is a great video. At one point, about minute 36, the grids break, but he explains the fix. In the notes, you will see the fix at

Hope that helps.

iamfratty’s picture

That is a very great video resource, thanks for sharing. But, alpha and omega take off the margins, but I still can't get it to work. I have tried a lot of combinations, and even making the padding I add plus the borders equal to 1-grid width, but I am still missing something.

iamfratty’s picture

This was the only way I was able to get it to work:

24 Cols
First Sidebar / grid-3
Content / grid-16
Second Sidebar / grid-4

In region--content.tpl.php, added the box div

<div<?php print $attributes; ?>>
<div class="box">
  <div<?php print $content_attributes; ?>>
    <a id="main-content"></a>
........more php code..........

CSS for the box div:
(Since my 3/16/4 grids equal to 23 grids and not 24, I have 40 pixels to play with. So 19 pixels padding on each side, plus 2 pixels for the borders = 40 pixels.)

.box {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
  padding: 0 19px;

Is there a better way to do this without using up 1 grid in your content?

benlawraus’s picture

I did it this way:
From safari/firefox I found there was
(I used the imageblock module) within the region.
I then placed
div.block-imageblock-1 {
in my custom them css file subtheme.css

eogiles’s picture

Check out
It has a few different approaches. The one I link to worked well for me. Basically you can draw a border on the inside of the region.

asanchez75’s picture

there is an interactive example here