I want to have a three column in node page, my page width is 940px, and one column is 300px + 20px right margin, so 3 column is 960px, but the main width is 940px, I want to 3 column in one row, how to do that? how to modify node.tpl.php?

  • 1
    Use Display Suite module – Alex Gill Oct 15 '12 at 8:29

I don't understand why this isn't a simple case of changing your CSS? You're adding 20px to 940px so that equals 960px. You must either use CSS3 (box-sizing: border-box;) or minus your extra 20px from 940px...which would be 920px. Standard box model stuff but maybe I'm missing something in your requirements.

  • Thanks, it works, and I found another way, just overwrite hook_preprocess(), and change code $variables['zebra'] = ($count[$hook] % 2) ? 'odd' : 'even'; to $variables['zebra'] = ($count[$hook] % 3) ? 'odd' : 'even';, and then add css in the div box like: <div class="column <?php print $zebra;?>">node content</div> – Brian Lau Oct 15 '12 at 12:04
  • Plus, you don't really want the right margin on the last column so that actually would equal 940px. 300+20+300+20+300 and then it will also line up correctly with the other elements on your page. – o_O Nov 12 '12 at 5:09

You can use modules like panels and theme like Omega without writing code or messing your node.tpl.php.

Omega theme provides so much flexibility to have a responsive design as well. It can support various types like three column, two column and 960GS.

Panels in combination with omega and also as a standalone can support your requirements.


  1. http://drupal.org/project/ninesixty will help you in your case
  • But I am using Zen, and I dont want to use panels module. – Brian Lau Oct 15 '12 at 8:27
  • Because content region width is 940px, and if I want to 3 column, need 960px – Brian Lau Oct 15 '12 at 8:29
  • Yes i have updated my answer – Dinesh Kumar Sarangapani Oct 15 '12 at 8:32
  • Thanks Dinesh Kumar, because I am now using Zen theme now, if need to change theme. very difficulty. – Brian Lau Oct 15 '12 at 8:45
  • I want to change the third column's style, like:<div class="column">1</div><div class="column">2</div><div class=column last>3</div> – Brian Lau Oct 15 '12 at 8:52

Try using Display suite module, install the module then go the manage display of you content type and at the bottom of the page you should change the layout for you content type.

after that put your fields in the correct places.

with some CSS work you will get what you want


So, you need 940px width on some pages and 960px on others? That's not the greatest design choice (ideally, refactor your 960 width pages to fit in 940 like the rest, or just make all of them 960), but you can do that with a class in your custom templates.

In page.tpl.php, find your main "wrapper" div (the one that's stuck at 940px). Then in CSS do:

div#wrapper { width:940px; } /* Normal width */
body.three-col div#wrapper { width:960px; } /* three-column layout */

Now in your custom node--whatever.tpl.php, add an additional class to the <body> tag (three-col), and the content area will give you your extra 20 pixels.


You could change/overwrite the right margin to 13 pixels, for example.

  • yes, I want to change the third column's style, like:<div class="column">1</div><div class="column">2</div><div class=column last>3</div> – Brian Lau Oct 15 '12 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.