How to combine full-width and fixed-width pages on a website

Question

We have a technical support website that currently features our software product documentation. All pages have the following layout:

• Left sidebar, with light gray background displaying a content tree
• Main area displaying actually help pages with text in one or two columns, tables, screenshots, and videos.

The web page layout takes 100% of the screen width. This allows to place a large amount of technical information on the screen visible without vertical scrolling.

We need to add several new sections to this website such as a blog, FAQ, etc. In the new sections, web pages should have a narrower layout with some empty spaces on the sides. This will provide better readability and look. We will also add a top menu bar to switch between the sections. However, we cannot add empty spaces on the sides of the documentation pages. Our challenge is how to combine the wide and "more narrow" sections, on a single website.

Is this combination acceptable and are there any websites that do that? Any thoughts about making the website look more appealing will be greatly appreciated. However if this approach is totally unacceptable, I would like to know about that so we can look for alternatives.

Answer 1

Implementation is rather simple and can be done entirely with CSS. It's just a matter of adding an ID or class to a top level tag - HTML, BODY, the topmost DIV. As long as you only add the selector to the pages you want with a fixed width, you can make a specific enough selector in your CSS to set some pages to fixed width and others to 100% width.

As far as whether it is acceptable, that is up to you. I've never seen it done, but I understand why you would want to do so.