Pin Me

Dreamweaver DIV Tutorial

written by: Regina Woodard•edited by: Amber Neely•updated: 9/6/2010

Using div's within Dreamweaver is a helpful way to organize content for your website. Here's a quick Dreamweaver div tutorial on how to use the div tag.

  • slide 1 of 4

    Making websites look and feel like the top of the line takes practice, patience, and an inner know how as to how things work from within. This is a quick tutorial on how to use the div tag within Dreamweaver. This article assumes that you are using a version of Adobe's dw3  Dreamweaver program (though this article will use the CS3 version) and that you have some knowledge of HTML and CSS designing code. If you are a beginner, the W3C School is a good place to learn more about HTML, CSS, and website design.

  • slide 2 of 4

    What is a DIV?

    A div tag - written as <div> - is simply a way to separate a section of a website. Divs are a part of CSS - cascading style sheets - which help to give a little more style and design to webpage.

    Say you have a website that outlines your writing ability - you have original short stories and original full length stories, with each story listed underneath. With a div tag, you would group together all of the original short stories in one group (possibly naming it div id="short") and the original full length stories in another group (naming it div id="long"). What this does is create a nesting effect; so for instance if you wanted a certain design or style for the group of short stories, you can now apply that to just that group.

    The important thing will divs is to not use them just for the sake of using them. Divs should be used in order to add additional structure to your pages, separating sections for easy reading and styling purposes. In the case of our writing example, it would make sense to use a div tag to separate the sections of long and short stories. You would never want to use a div to separate the short stories section into separate sections.

    Now that you know what a div is, let's get started on this Dreamweaver div tutorial!

  • slide 3 of 4

    Starting with Dreamweaver

    Before we go on, it's important that you have a basic understanding of both Dreamweaver and that of HTML/CSS. This article assumes that you are familiar with both. While it doesn't matter too much which Dreamweaver you use, for this tutorial we will be using the CS3 version of Dreamweaver and it is suggested that you are also using a current version of the software.

    The first thing is to open Dreamweaver. You should be taken to the home screen, where you will see the different selections you can choose from, including creating new pages for HTML, Javascript, CSS, etc. This screen may vary depending on how you set up the program when first installed. Next, we are going to make a new CSS page.

  • slide 4 of 4

    Dreamweaver div tutorial example

    Continuing our Dreamweaver div tutorial, you should have made that new CSS page from the last page; you can make the text and backgrounds however you like. The important thing here is for you to add the div tag within your style sheet, usually placing it at the end of the sheet. Here's an example -


    position: relative;

    width: 400px;

    margin: auto;


    That is a div or rather it's the ID for the div and what it does it tell your HTML file that you're going to make a container. On the next page, you'll see an example.

    here's a look at what was mentioned above - with the making of a new CSS sheet to go into a new HTML page. Here's an example of the above - div tutorial 

    This is a new page, with a pretty boring looking background, I know; nothing exciting...except the long bar across the top. That is our div. You can put anything in a div; some people even use divs to make the entire layouts for their websites with the use of divs. They can be quite handy.

    Remember, divs are helpful, but you shouldn't use them for everything. Having too many divs in your website code would be difficult to manage; you need to name every div differently to ensure that you don't cause an issue. In website design, you want to make sure that you are able to go back to your code to make any necessary changes that may need to happen.

    This Dreamweaver div tutorial just introduces the basics of what a div is and what it can do for your website. There are many more tutorials, not only on how to divs in a much more advanced way, but tutorials on how to get the best out of Dreamwaver and other Adobe products.