I need the left sidebar to be fixed width and the content with right sidebar to be fluid

How to do that in zen? or in any other theme

Thnks

Comments

edrupal’s picture

The solution will be different for each theme. Are you using a particular theme?

tassaf’s picture

Yes, I am using ZEN 7 theme

edrupal’s picture

There are quite a lot of CSS changes, but to get you started, and based on this tutorial:

1. A change is required to page.tpl.php to add a wrapper div around the main content. In my example I change the page.tpl.php as follows:

<div id="main">
  <div id="content-wrapper"> <------ New div added here
.
.
    </div><!-- /#content -->
  </div><!-- /#content-wrapper --> <------ new closing div here 

2. Next are the changes to the responsive-sidebars.css style sheet. In the example below I've only shown the case where there are two sidebars and for the section '@media all and (min-width: 960px)'

/*
   * The layout when there are two sidebars.
   */
    /* Styling for the new div that was added to the page.tpl.php file */
   .two-sidebars #content-wrapper {
    float: left;
    width: 100%;
   }
   
  .two-sidebars #content { /* Span 4 columns, starting in 2nd column from left. */
    margin-left: 200px;  /* This is set to whatever width you want the left sidebar */
    margin-right: 20%;  /* This is set to whatever width you want the right sidebar */
  }

  .two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 200px;  /* This is set to whatever width you want the left sidebar */
    margin-left: -100%;
  }
  .two-sidebars .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
    float: left;
    width: 20%; /* This is set to whatever width you want the right sidebar */
    margin-left: -20%; /* This is set to whatever width you want the right sidebar */
  }

Obviously you'll need to make appropriate changes to the style sheet for the other screen sizes.

Hope this helps

Ed

tassaf’s picture

Thank you very much.. this is perfect :)