I've just spent the last few hours trying to resize the sidebars of my Zen starter kit theme using a fixed width layout. I'd say I'm pretty good with CSS but resizing sidebars in the "Border Politics" layout method is quite confusing. I was really glad to see comments in this section of CSS however a few appear to be incorrect and tell the user the wrong thing to do to resize the sidebars.

The error I have found is in layout-fixed.css. And the comment in question is:

/* Negative value of #content's width + left margin. */

This comment is repeated 4 times and the first time it is used it is correct however the following 3 are incorrect.

Here are the 3 comments in question from layout-fixed.css. Keep in mind the value of "#content's width" in the default code is 560px and "left margin" refers to the margin-left property (one line above the comment in each of these examples):

  .sidebar-left #content
  {
    width: 760px;
    margin-left: 200px; /* The width of #sidebar-left. */
    margin-right: -960px; /* Negative value of #content's width + left margin. */
  }

  .sidebar-right #content
  {
    width: 760px;
    margin-left: 0;
    margin-right: -760px; /* Negative value of #content's width + left margin. */
  }

  .no-sidebars #content
  {
    width: 960px;
    margin-left: 0;
    margin-right: -960px; /* Negative value of #content's width + left margin. */
  }

Comments

johnalbin’s picture

Status: Active » Closed (works as designed)

So… using my calculator I find:

.sidebar-left #content: -1 * ( 760 + 200 ) = -960
.sidebar-right #content: -1 * ( 760 + 0 ) = -760
.no-sidebars #content: -1 * ( 960 + 0 ) = -960

Looks fine to me.