How to edit the Variant Multi layout options (part 1)

The latest free website template release, Variant Multi, offers a lot of layout options. But how do the different layouts work? Here is the first part of a short walkthrough of the ideas behind the Variant Multi design…

One CSS file, many small tricks

As you may have seen from the screenshots or the live demo, four HTML files are included in the .zip download. The main difference between those files is that they use different ID:s and classes for some key <div> tags. First of all, this is what index.html looks like:

This file has the 980px wide layout. It has a dual-column feature area, a combined 2- and 3-column main content area with a sidebar and a 3-column footer area with one footer section wider than the other two. Compare this with the included file 600px.html, which looks like this:

Here you can see the 600px wide layout, a single-column feature area, a single column main content area with no sidebar – and a dual-column footer. Both files use the same stylesheet, the included variant-multi.css file. But the files use different ID:s and classes. Here are the most important ones:

The container div

The first div in each HTML file, right after the body tag, defines the layout width. In index.html, the ID used is called “container980”. It gives the layout a fixed width of 980 pixels, as defined by the #container980 style definition in the CSS. The second file, 600px.html, uses an ID called “container600”, defined by #container600 in the CSS. Both ID:s have only one style definition, the width, but it affects the entire page layout since the style is applied to a div which contains all other content in the HTML file. Other options for the container div are “containerfull” for a full-width fluid layout, and “container760” for a 760 pixels wide fixed-width layout.

The feature div

The feature area looks like this in index.html:

<div id="feature">
<div class="left">			
<h2>Feature #1</h2>
<p>This area can be used to put something special in focus. Products, a presentation
or anything you may want to highlight. If not needed, this area can be removed completely.</p>
</div>

<div class="right">
<h2>Feature #2</h2>
<p>Use div class="left" and "right" for two columns, or remove the two extra div:s to use a
single column here.</p>
</div>

<div class="clear">&nbsp;</div>
</div>

The two columns in index.html are created by the two div:s with the classes “left” and “right”, followed by a clearing div that makes sure that the content that follows the feature is positioned in the right place.

In the single-column feature area of 600px.html, much less code is used:

<div id="feature">
<h2>Feature #1</h2>
<p>This area can be used to put something special in focus. Products, a presentation or
anything you may want to highlight. If not needed, this area can be removed completely.
This is the single-column feature style.</p>
</div>

Since the feature content doesn’t need to be split into two parts, no additional div:s are needed. In other words, the feature column option is handled in the same way as it is in several of my newer templates, including Variant Duo (which was used in the “Building your first website using a free website template”-tutorial).

The main content area

The same “left” and “right” classes that were used in the feature div, are also used to create the dual content column split in the main content area in index.html. To reduce the main content area into a single column, the div:s with id=”content” and id=”sidebar” are not used at all. All main content is placed directly in div id=”main” – similar to how all content in the single-column feature was placed directly in the div id=”feature” rather than splitted into separate div:s.

So, 600px.html doesn’t use the div:s with id=”content”, id=”sidebar” or the classes “left” and “right” at all. Those classes are not needed to build a working layout using the Variant Multi template – but they give you the ability to choose if you want to use a simple or a more advanced layout for your site. In short, the extra ID:s and classes are what gives the template its name.

Moving on…

The footer area is explained in part 2…

css, tutorials, Variant Multi