Position items on a web page

  • Article

You can position items on a page by designing a page layout that uses DIV elements, CSS, tables, or frames to structure the page. You can also position one or more items in a page by setting CSS-based properties for an item or an element that contains one or more items.

In addition to the steps that are provided in this topic, you can also set these CSS-based properties by using the Positioning toolbar or the CSS Properties panel. The Quick Tag Selector bar also enables you to quickly set the positioning style of a tag. For more information about the Positioning toolbar, see Positioning toolbar. For more information about the CSS Properties panel, see CSS Properties panel. For more information about the Quick Tag Selector, see Quick Tag Selector.

To modify an item's position by using the Position dialog box

  1. In Design view or Code view, put your cursor in the content you want to position or select the content.

  2. To open the Position dialog box, do one of the following:

    • In your web page, select the element that you want to modify, and then on the Format menu, click Position.

    • In the Layers panel, right-click the layer, and select Positioning.

  3. To specify how you want the page elements to wrap around the item, in the Position dialog box, under Wrapping style, select a style.

  4. To specify the positioning style of the item, under Positioning style, select an option.

  5. To specify the relative position coordinates of the layer, under Location and size, enter values in the Left, Right, Top, and Bottom boxes.

  6. To set an item's order on the z-axis, specify a value in the Z-Order box.

  7. Click OK.

To modify only an item's positioning style

  1. In Design view or Code view, put your cursor in the content you want to position or select the content.

  2. At the top of the document window, in the quick tag selector bar, point to the tag you want to position, click the down arrow next to the tag, point to Positioning, and click a positioning style.

See also

Tasks

Position a layer

Reference

Quick Tag Selector
Positioning toolbar
CSS Properties panel

Concepts

Cascading style sheet reference

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.