Laying out pages with floating boxes

You can use floating boxes to divide your page into rectangles that can be formatted and positioned individually. Floating boxes can contain any HTML element that a page can contain--such as an image or simple HTML text with formatting.

Floating boxes represent DHTML layers, which make it possible to overlap, hide and show, and animate them on your page. For example, floating boxes are commonly used with the Show/Hide action to make them appear and disappear at the trigger of the mouse. Floating boxes can contain background images or color, and they can inherit properties from the page's cascading style sheet (see Using Cascading Style Sheets). They can be positioned precisely, because they are implemented using the DIV element. The DIV element, formatted with a CSS ID style for the width, visibility, and absolute position of the floating box, instructs the browser to create a subdivision that is not part of the normal flow of HTML within the page.

Note: To display properly, floating boxes require Web browser versions 4.0 or later. To see what a floating box would look like in a Web browser that does not support cascading style sheets, turn off CSS support in the browser's preferences.

For table-based designs, you can convert non-overlapping floating boxes and their contents to a new page with the contents duplicated on a layout grid. (See Converting floating boxes into layout grids.)


Floating boxes are used to hide text and objects and make them reappear. A. Markers for 3 floating boxes B. Image link with Mouse Enter event attached to Show/Hide action C. Pointer over image triggers floating box of text to appear below

Related Subtopics:

Adding floating boxes to the page
Adding content to a floating box
Resizing and positioning floating boxes
Managing floating boxes
Converting floating boxes into layout grids
Hiding and showing floating boxes