Positioning HTML Elements in Design View

Article
10/12/2006

The Design view editing surface offers two ways to position HTML elements, Flow Layout and Grid Layout. The pageLayout property of the active HTML document or Web form can be set either from the Properties window or from the DOCUMENT Property Pages dialog box. Setting the pageLayout property to GridLayout inserts an ms_positioning attribute into the <BODY> element of the active HTML document:

<BODY ms_positioning="GridLayout">

For more information, see Setting the pageLayout Property of an HTML Document.

Flow Layout

When the pageLayout is set to FlowLayout, elements are permitted to flow from left to right within a line, and from bottom to top within the page. Any Web browser can display HTML documents that use Flow Layout positioning. Elements will sometimes be repositioned when the page is resized.

You can align elements inside a <TABLE>, or use a <CENTER> element to position them. However, you cannot use absolute positioning attributes, or make elements overlap.

Grid Layout

Setting the pageLayout to GridLayout enables you to place elements at precise positions on the Design view surface. The Show Grid and Snap to Grid buttons become available on the Display toolbar. With Snap to Grid selected, when you insert an element or drag an element across the Design view surface, its upper left corner is aligned automatically with the grid lines nearest to the insertion point.

Layering Elements

When the targetSchema property of an HTML document is set to a browser that supports HTML 4.0 or above, positioning is accomplished using CSS positioning attributes. This permits elements to overlap. Absolutely positioned elements are displayed at their assigned positions, and if two elements share the same space, the element with the higher z-index attribute value is displayed in front.

When the targetSchema property is set to "Internet Explorer 3.02 / Navigator 3.0," the only valid HTML elements and attributes are those defined in HTML 3.2. Because CSS style attributes are not available, <TABLE> elements are generated to position elements. Indicators () appear at the upper left corner of any elements that overlap, to indicate that HTML 3.2 did not support overlapping.

Aligning Existing Elements

When you select Snap to Grid, HTML elements already on the Design view surface are not automatically repositioned. To align an existing element with the positioning grid, select the element, choose Align on the Format menu, and set an alignment option. If you need to align and to resize an element, align the element first. For more information, see Aligning and Layering HTML Elements in Design View.

Resizing Elements

With Snap to Grid active, when you click and drag an element's positioning handles to resize it, the element is resized in grid increments. For example, with both the grid Spacing measurements set to 4 pixels, an element will be resized in 4 pixel increments. To control how Snap to Grid affects resizing behavior, adjust the Horizontal Spacing and Vertical Spacing increments in the Display, HTML Designer, Options Dialog Box.

Adjustments to Positioning

Set the pageLayout property of an HTML document or Web form when it is first created. For example, when you add a new HTML page or Web form to your project, set its pageLayout property to GridLayout. Then insert a Grid Layout Panel from the HTML Tab, Toolbox onto the Design view surface. To resize this new Panel in fixed increments, select Snap to Grid, and then click and drag the Panel's sizing handles.

If you add a button and drag it to a location within this Panel with Snap to Grid selected, the button will automatically be aligned with the nearest grid lines. To offset the button slightly from other elements within the Panel, select the button and use the Position, Style Builder Dialog Box to make fine adjustments to its position.

When you drag the parent Panel across the Design view surface, the absolute positioning attributes within both the parent Panel (a <DIV> element) and the embedded button (an <INPUT type=button"> element) are automatically adjusted. Any fine adjustments to element positions within the Panel are retained. To realign the offset button with the other elements embedded within the Panel, turn on Snap to Grid, then select the button and drag it in the desired direction.