Layout Widths

Overview

The Layout Widths Section contains stylesheet properties that control the widths of page sections via CSS rules.

The properties in this section are not written directly to the CSS file; during the execution of the Make Styles or Make Site commands, Layout scripts determine the proper CSS rules by combining these values and layout-specific logic.

The properties are divided into two sections, Fixed Widths and Percentage Widths. Fixed Widths are specified in pixels whereas Percentage widths are specified as percentages.

Note Some of the properties in the Layout Widths section are used by scripts that are part of the Make Site command. If you adjust a property, and then use Make Styles (F2) to view the site and you do not see a change, use the Make Site command.

Fixed Widths

fixed-container-width

For all fixed-width Layouts, the width of the page content is determined by the fixed-container-width property.

Other widths are calculated based on the fixed-container-width value. For example, the width of the Content section is usually determined by subtracting the width of other columns from the fixed-container-width.

fixed-sidebar-width

For all Layouts with a fixed-width SideBar section, including all the fixed width Layouts and certain others, the width of the SideBar section is usually determined by the fixed-sidebar-width property. This value may be ignored when the SideBar section and Extra section are stacked in the same column; in that case, the column width is set to the greater of the two widths.

fixed-extra-width

For all Layouts with a fixed-width Extra section, including many of the fixed width Layouts, the width of the Extra section is often determined by the extra-sidebar-width property. This value may be ignored when the Extra section is positioned beneath the Content section, in which case the width of the Extra section is determined by the available space. Like the fixed-sidebar-width property, this value may be ignored when the SideBar section and Extra section are stacked in the same column; in that case, the column width is set to the greater of the two widths.

Percentage Widths

For these properties, specify a value between 1 and 99. The values should add up to 60 or less in order to leave adequate space for the Content section,

percentage-sidebar-width

For all Layouts with a percentage-width SideBar section, which includes most of the percentage width Layouts, the width of the SideBar section is determined by the percentage-sidebar-width property. This value may be ignored when the SideBar section and Extra section are stacked in the same column; in that case, the column width is set to the greater of the two widths. Some percentage width Layouts have a fixed-width SideBar section, in which case the width is determined by the fixed-sidebar-width property.

percentage-extra-width

For all Layouts with a percentage-width Extra section, which includes most of the percentage width Layouts, the width of the Extra section is determined by the percentage-extra-width property. This value may be ignored when the Extra Section is positioned beneath the Content section, in which case the width of the Extra section is determined by the available space. Like the percentage-sidebar-width property, this value may be ignored when the SideBar section and Extra section are stacked in the same column; in that case, the column width is set to the greater of the two widths.

Other Widths

border-image-offset

For Layouts with a repeating image down one side of the window, the offset between the left-edge of the window (or other container) and the page content is determined by the border-image-offset property. Themes that include border images will set this value, but you can modify it if necessary. The offset should usually be the width of the border image, plus or minus a few pixels.

index-frame-width

For framed sites, the index-frame-width property determines the width of the index page frame.