Precisely Positioning div Tags in Your Page From Design View

By: Adrian Senior

Page 1 of 1

Set for printing

Not everybody likes working in code view. Indeed, I would guess that many folks purchase Dreamweaver just so they don't have to work in code view. In this article we will look at how you can insert div tags into your code, precisely. We will do this from Dreamweaver's design view by making good use of the insert div tag function that can be found on the Insert Bar.

To use this option you do not have to have your cursor placed in the exact location that you want to insert your div, which is a reason given by many for switching to code view. Dreamweaver is intelligent enough to place your div precisely where you want it without the need to switch views, as we shall see.

Accessing the Insert Div Button

You can access the Insert Div Tag button from the Layout tab on the Insert bar. To see this in action have a CSS page already open in design view. If you don't have one to hand you can download the free North Pole jumpstart to test with. The link opens a new window to allow you to easily return to this tutorial, all the installation instructions are available within the North Pole download zip file.

Open your CSS layout in design view and select the Layout tab and then click the Insert Div Tag button, as shown in Figure 1.

Figure 1: Selecting the insert div button

Once selected the Insert Div dialog box opens in its default state, as shown in Figure 2. The first list option we need to utilise is the Insert list. These five options allow you to place your new div anywhere in your code. The options in this list can vary but the list always defaults to "At insertion point". It also provides the ability to place the new div before or after any tag and even to nest the new div — when that option exists in the code— within a specific tag by using the "After start of tag" or the "Before end of tag" options. The insertion point selection is further enhanced by the accompanying list, as you will see in Figure 3.

Figure 2: Selecting the location for you new div

Once you have made your selection the second list becomes active, as shown in Figure 3:

Figure 3: Selecting the precise location

In the Insert list I selected the "After tag" option, which activates the adjacent list populated with all the existing divs on my page. From this list I will select the header div option, this means the new div will be inserted immediately after the closing tag of my header div. You can't get much more precise than that!

Figure 4: Selecting a class for the new div

With the location for the new div set I can now choose to apply a class or an ID to it. In this instance, I'm going to set a class: the search class. The list of IDs and classes are populated directly from my CSS file, so all my rules are available to me using this method.

If I had chosen to set an ID for this div the only IDs that would be available to me in the ID list would be IDs that had not already been used on the current page. You should only use an ID selector once in any given page. Dreamweaver knows this and removes any IDs from the list that exist on the current page, preventing accidental errors.

Figure 5: The completed Insert Div Tag dialog box

With your Insert Div Tag dialog box completed you can click the OK button and Dreamweaver will insert your new div in your chosen location.

Figure 6: The new div is inserted at your chosen location

As you can see from Figure 6 the new div has been inserted immediately below the header as requested and Dreamweaver has added some place-holder text to open out the div and make its location easy to find.

<!-- Close header -->
<div class="search" style="">Content for class "search" Goes Here</div>

Listing 1: A quick check in code view confirms everything is located just fine


In this article you have seen how it is possible to precisely place your divs from within Dreamweaver's design view by using the Insert Div Tag button. Now if only this function had the ability to add a closing comment to the </div> tag we wouldn't need to perform any of this sort of work in the source!

Until next time :~)

Page 1 of 1 1

Download Support Files

Downloads are disabled during your trial period.

Insert, div, tag, design, view, ID, class, Before tag, After tag