How to Use Layout Options in Dreamweaver’s CSS Property Panel
At the top of the CSS Designer Properties panel you find the CSS properties commonly used to create page layouts. You use these options to specify height, width, alignment, positioning, and spacing. These settings are ideal for creating page layouts with class and ID styles to do things such as align images and position <div> tags to create multicolumn layouts.
You can use the Layout options in the CSS Property panel to set these values:
Width: Specify a width for any element that can have its dimensions specified, such as a <div> tag. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch.
Height: Specify a height for any element that can have its dimensions specified.
Min and Max Width: Specify minimum and maximum widths for <div> tags and other block elements. These options are useful when you specify the width as a percentage of the browser window. For example, you can set the design width at 80 percent of the browser window, and then set a Max Width of 1000 px to prevent your layout from getting stretched wider than 1000 pixels.
Min and Max Height: Specify minimum and maximum heights for <div> tags and other block elements.
Margin: Set the amount of space around an element. Margins can be used to create space between the edge of an element and other elements on the page, such as between an image and text or between two <div> tags. You can set the margin separately for the top, right, bottom, and left. Padding is measured in pixels, points, inches, centimeters, millimeters, picas, ems, exs, and percentages.
Padding: Sets the amount of space within the borders of an element. For example, you can use padding to create space between the borders of a <div> tag and its contents. You can set padding separately for the top, right, bottom, and left. Padding is measured in pixels, points, inches, centimeters, millimeters, picas, ems, exs, and percentages.
Setting padding and margin spacing can be tricky. When you add margin and padding to an element, such as an image or <div> tag, you increase the overall size of that element and the amount of space it requires in the layout.
Position: The Position option, available from the lower part of the Layout section of the Properties panel, alters the way elements are positioned on a page. Positioning can dramatically change the way block-level elements (such as table, list, header, paragraph, and <div> tags) appear in a browser.
Inherit: You do not need to specify this default option. Unless another option is selected, each element inherits the positioning of its parent element.
Static: Place the content at its location within the flow of the document. By default, all HTML elements that can be positioned are static.
Absolute: Use the top and left coordinates to control the position of an element relative to the upper-left corner of the browser window or the upper-left corner of an element that contains the element.
Fixed: Position an element relative to the top-left corner of the browser. The content of an element using fixed positioning remains constant even if the user scrolls down or across the page.
Relative: Use a position relative to the point where you insert the element into the page or relative to its container.
Float: Align elements, such as images and <div> tags, to the left or right of a page or other container causing text or other elements to wrap around it. Click the icons in the Float field to specify the following four options: Inherit, Right, Left, or None.
Clear: Prevent floating content from overlapping an area to the left or right, or to both sides of an element. This option is useful when a floated element, such as a <div> tag used to create a sidebar, overlaps another block-level element, such as a <div> tag used to create the footer of a page.
Overflow-x and -y: Tell the browser how to display the contents of an element if the container, such as a <div> tag, can’t fit the element’s entire height or width. Overflow options are
Visible: Keep content, such as an image or text, visible, even if it expands beyond the defined height or width of a container.
Hidden: Cut off the content if it exceeds the size of the container. This option doesn’t provide scroll bars.
Scroll: Add scroll bars to the container regardless of whether its content exceeds the element’s size.
Auto: Make scroll bars appear only when the content of a container exceeds its boundaries.
Display: Indicate if, or how, to render an element in a browser. For example, you change the positioning of an unordered list from horizontal to vertical by choosing Inline or hide an element, rendering it invisible, by choosing None. You can use the Display option with a scripting language to change the display of elements dynamically.
Visibility: Control whether or not the browser displays an element. The Visibility options are
Inherit: The element has the visibility of the element in which it’s contained (the default).
Visible: The element is displayed.
Hidden: The element isn’t displayed.
Collapse: For use with HTML tables. Collapse can be used to remove a column or row without affecting the rest of the table layout.
Z-Index: Control the position of an element on the Z-coordinate, which controls the stacking order of elements in relation to each other. Higher-numbered elements overlap lower-numbered elements.
Opacity: Control the opacity level for an element from 0.0 (fully transparent) to 1.0 (fully opaque). For example, if you enter .5 in the opacity field, the opacity of an element will be reduced to 50 percent.