Breaking Boundaries

Have you ever dis-located or broken a bone? Sometimes they have to re-break it just to set it in the right place. The innards of PageLines works in the same way when you want more control.

In every section, there's a .content div. This divs width, is controlled via the width set in Layout Editor. So if your layout editors width was set to 900px, this div would have a max-width of 900px. This is fine, but what happens when you want to have something span the full-width of the screen, while also keeping that max-width for content? For this, you need a hybrid approach.

Break Out

The trick is to break the .content, and reset it within your own section. We can do this by using the LESS variable that the Layout Editor produces. In this case, using a LESS variable of @pl-page-width for the entire page width, or @pl-content-width if using a sidebar. Take this markup for example, and let's assume you have a section called somesection.

<div class="somesection">
  I'm full width
</div>
<div class="somesection-content">
  I have a max width
</div>

And the accompanying LESS.

#page .section-somesection {
  background:@baseContrast;
  .content {
    max-width:100%;
  }
  .somesection-content { 
    max-width:@pl-page-width;
    margin:0 auto;
    padding:5px;
    .box-sizing(border-box);
  }
}

As you can see here, we've broken .content and have forced it to be set to 100% max width. Then, we've reset that back into our own div called .somesection-content. Lastly, we're setting a simple background color using a core LESS variable so we can see the section set full-width.

Keep in mind that this LESS variable only produces the outer width and does not account for padding. In other words, if you don't set .box-sizing(border-box); set in your .somesection-pad div, the width will be off.

1 Reply
filed under
  • Paul Romijn:

    Thanks for this! Very useful.

    Monday 22nd April, 2013, 12:00am