Positioning and Size

For most elements, you may influence positioning and size in the following dialog.

With the Absolute positioning setting, elements have no influence on following or neighboring elements. Absolutely positioned elements can overlap with other elements. In this, the positioning orients itself to follow the next previous element that has no static positioning.

The main container is available in all layouts that you edit in the Design module. The main container can not be deleted. Its properties can, as with all other design elements, be changed in the Element settings. For an Empty layout, the main container possesses the Absolute positioning setting. This means that each additional element that you create on the workspace with absolute positioning will align itself in its location to the main container. For example, if you drag a Container onto the workspace, its position in the CSS will be given in the distance in pixels it has in the upper left to the main container.

In this example, the main container is light blue, and the newly created container is colored dark blue.

Here, the distance to the upper and left side of the main container is 20 pixels.

Here, the distance to the upper and left side of the main container is 80 pixels. An element that you arrange within this second, absolutely positioned container will give its distance from the sides of the second container.

Here the distance of the white container to the main dark blue container is ten pixels from the top and left each. If you move the white element out of the dark blue container, its position will be calculated in relation the main container again – here the distance from the left border of 20 pixels and from the upper border of 40 pixels.

The absolute positioning should be implemented when an element is to be independent of its neighbors. With the Static positioning setting, a line break will be entered to the HTML after the element. The position of an element will be specified through its location within the document. With automatic size settings, the element will be aligned by the type of positioning. For automatic positioning, the height, width, or height and width will be automatically adjusted for the space between its absolutely positioned neighbors. The adjustment will be controlled via the values right and left and/or top and bottom. For static positioning, an automatic width ensures that the element takes on the width of its main container. An automatic height aligns itself in this case to the content of the element. With the setting Fixed width and height, the dimensions that the element has on the workspace will be retained.