Say you have a site page with content inside, and the only thing missing from the page is a vertical CSS menu on the left. You want the page content to be displayed on the right, and not to expand below the menu. You also do not want to use tables to position the page elements, but divs.
To generate the menu in page and position it by using divs, follow the next steps:
In Code view, locate the opening <body> tag, create a new line below it, and enter <div></div> to create a div for the vertical menu. Place the cursor between the opening and closing tags:
Note: If you are in Design view, the CSS menu is inserted in page right where the cursor in placed (it can only be placed inside tags content). If you are in Code view and the cursor in placed inside a tag (where attributes and values are listed), the menu will be inserted below that tag.
Apply the CSS Menu Wizard or Database-driven CSS Menu Wizard to generate a CSS menu. After applying it, the Dreamweaver page in Design view should look similar to this:
If you preview it in browser, you will see the menu displayed on top of the page, and the content below it:
But what you want to have in page is the menu on the left, and the content on the right. In order to achieve this, for the menu container div (the one you manually created) you have to set the float property to take the left value (so that content could be displayed on the right, beside the menu). Go back to the Dreamweaver file, switch to Code view, and add style="float: left;" inside the menu container opening div tag: <div style="float: left;">.
At this moment, the page in browser should look like this:
You do not want the page content to spread below the menu though. To make this happen, you have to include the page content (except for the menu) in a div, and set it to float on the left as well:
Locate the menu container closing </div> tag, create a new line below it, and enter <div style="float:left;">.
Locate the </body> tag, create a new line above it, and enter </div> to close the div in which you are including the page content.
Finally, when you preview the page in browser you see what you wanted to see:
Whenever you want to position and align a menu in page in certain ways, it is recommended that you include it in a div (the static menu is by default generated in a div, but still create a container for it), and then customize the div container in terms of positioning and alignment.