## Flexible items

Normally HTML items and graphic items have a fixed size and position on the page, and remain fixed if the user changes the size of the browser window.

Freeway provides two options to allow you to create flexible items that change relative to the size of the browser window.

#### Layer items

The recommended option if you are using the HTML 4.01 or XHTML export options is to define the item as a layer item, in which case it uses CSS-based layout to specify the size and position of the item. With layer items you can define any of the dimensions as a percentage relative to the browser window, instead of as an absolute value in pixels.

#### Non-layer items

Non-layer items use table-based layout to position the item on the page. You can make non-layer HTML items flexible horizontally, so they expand depending on the size of the browser window, and/or flexible vertically, so they adjust to accommodate the content.

### To define an item as a layer item

- Select the item.
- Click the general settings icon at the top of the Inspector palette to display the item general settings.
- In the Properties section select Layer.
- Choose Absolute from the Layer pop-up window to position the item relative to the top left corner of the page, or Fixed in Window to position the item relative to the top left corner of the browser window:

Note that Fixed in Window may not give consistent results in different Web browsers

### To make the dimensions of a layer item flexible

- Specify the appropriate dimensions as a percentage in the Dimensions section of the Inspector palette:

### To specify the overflow behavior for layer HTML items

- Select the item.
- Make sure Layer is checked on the item general settings panel of the Inspector palette.
- Click the output settings icon at the top of the Inspector palette to display the item output settings.

The Overflow pop-up menu provides four options for determining what happens when the content overflows the HTML item in the Web browser:

The options are explained in the following table:

Option | Description
Visible | The content is allowed to overflow and is visible below the item.
Hidden | The content is truncated to the size of the item.
Scroll | The item always displays a vertical scrollbar to allow the user to scroll the content into view.
Auto | The item only displays a vertical scrollbar if the content overflows.

### To make the width of a non-layer HTML item flexible

- Click the output settings icon at the top of the Inspector palette to display the item output settings.
- Select Width Can Grow:

When the page is output, the HTML item will expand in proportion to the width of the browser window.

### To make the height of a non-layer HTML item flexible

- Click the output settings icon at the top of the Inspector palette to display the item output settings.
- Select Height Can Shrink:

When the page is output, the height of the HTML item will adjust to fit the content within it.

Contents