All Articles Dreamweaver
Understanding CSS Layout in Dreamweaver CS6, Part 2
Tareq Fadel on Wed, June 19th 0 comments
Need some help understanding Dreamweaver and laying out CSS for your website? Expert web designer, Tareq Fadel, shows how in the final part of this two part tutorial-article.

In the previous tutorial, Understanding CSS Layout in Dreamweaver CS6 – Part 1, we looked at Absolutely Positioned Elements and how to use them as part of your layout design. Following on from the previous tutorial we’ll look at the other three design principles, fixed, static and relative.

Fixed Position Elements

Fixed positioned elements are exactly the same as absolutely positioned elements apart from one main difference. Absolutely positioned elements are positioned to the document by their placement properties whilst fixed positioned elements are aligned to the browser. What do I mean by that? Well if we have a long document where we can scroll further down on the page we’ll notice that any elements that we’ve aligned will disappear off the page. In a fixed positioned element they’ll stay in view and will always be visible. Let’s give it a try!


First we need an HTML page with a lot of content. I’m just going to copy some dummy text or (lorem ipsum) text from to generate a few paragraphs and headers and paste them into the design view so that we have some sample HTML. Enough content so that we can scroll up and down.

Pic 1

Now that we have the HTML page we need to add/create some AP elements and then we’ll convert them to Fixed positioned elements.

  1. Draw an AP div box in the top left corner of the page
  2. Give it a name in the properties box (e.g. Box1)
  3. So that we can see it, also give it a background colour (Bg color)

Now this is still an absolutely positioned element we now need to convert it to a fixed positioned element.

Pic 2

Converting our Absolute to Fixed

To convert our div from absolute to fixed we need to open the CSS Styles panel and choose the div id that we had created #Box1. At the bottom we can change the position from absolute to fixed or we can edit it from CSS Rule definition for #Box1 by double-clicking the #Box1 in the panel. There are many options and categories in the dialog box. Under positioning category on the left, you’ll find Position: property which on the drop down list you’ll find fixed.

Pic 3

Once you’ve chosen fixed you’ll notice that the layout had changed in design view. Don’t trust what you see in design view and rely more so on what it looks like in the browser. Alternatively you can have a quick sneak at what it will look like by viewing Live View as this renders the same as a browser.

Pic 4

Pic 5

Now when you preview this in the browser by clicking on Preview/Debug in Browser and you launch it in your favourite browser you can scroll up and down and you’ll notice that the box stays exactly where it is regardless of the scroll position of where you are in the document.

There are a few benefits to this. You can create a header that’s always visible regardless of where you are. You can create a menu on the right or left that’s always accessible or more annoying, you can have adverts that persist throughout the site, but then this could have a negative drawback to the people viewing your site. Here’s a live example of where this technique is used as a header: Twitter.

Pic 6

Creating a header

So how can we create a header using fixed like twitter. First we need to change the width of our box to 100% and the height to a fixed value e.g. 100 px. Whilst keeping the position: fixed this then provides us with the header. Also the Top and Left placement must be 0.

Pic 7

If you change the placement values to Bottom 0 and Left 0, you have then created a fixed footer instead. But remember, you can only have 2 placement values at the same time and remove the 0 value from top as it’s impossible to be zero from the top and zero from the bottom

Pic 8

Static Layout

A static position element is the default positioning of any element you add to the page. Any element that is assigned a position of static is part of the content and moves or flows with the content. Unlike absolute or fixed where they are taken out of the context of the content and placed on a layer of their own that sits on top of the content. 

Let’s add a static div and see how it relates to the content.

Going back to our basic HTML page that we had, we’re going to add a normal div which will by default be a position static.

Right underneath the Header 1, I pressed Enter to make some room and then in the Insert Panel underneath Layout category, I chose Insert Div Tag. A dialog box appeared giving us the option of class or id. Let’s give it an id of mystatic. 

Pic 9

As soon as you do that a dotted lined box appears with the text “Content for id “mystatic” Goes Here. Think of it like a paragraph that you can place content and change the appearance of it using CSS.

Let’s change its background colour, width and height. To do that, in the CSS Styles Panel, click the New CSS Rule button and make sure #mystatic is in the selector box. If it’s not, then type it in. # symbol represents an id name in the HTML. In Background category change the Background-color to a colour of your choice, then in box type in a width and height. I’m going to choose 200px and 200px. 

Pic 10

As soon as you click OK, you’ll notice that the changes have taken place. If we select the div by clicking on the outer edge we can cut and paste like any other content on the page and place it where we want and it’ll push down the other paragraphs or content to make room. As shown in the picture below where I’ve cut and paste it to a different location.

Pic 11

The Float

One more thing I’ll show you is the float. The float allows you to wrap text around the object. For example, if we wanted the text to appear on the right hand side of the box we can float the box to the left and the text will wrap around it. To achieve this edit the css rule in the CSS Styles panel by double-clicking it or clicking the pencil icon to edit it. So here I’m editing the #mystatic rule. Under Box category change the float to left. 

Pic 12

As soon as you’ve done that you’ll notice the text appearing on the right of the box. Try float right.

Pic 13


The last one that we haven’t seen yet is relative positioning. To be honest with you, static and relative are exactly the same apart from one noticeable difference. The difference is that static has no placement. What do I mean by that? You remember the placement values of top, left, bottom and right that we used with absolute and fixed? Well we can’t use these with static and if you do, they’re completely ignored as the placement is controlled by the flow of the document. If we wish to add placement to our static div then we need to make the div into relative. The word relative comes from that the position is relative to where it was, ie., if we had a box in a set position and we set the left to 50 px it would 50 px from where it was. Let’s try it!

Pic 14

Under Positioning category we changed Position: to relative and Top to 50 px and Left to 50 px and as soon as you click apply or OK you’ll notice that the changes have taken place where the box has moved down from the top by 50 px and from the left by 50 px. In a matter of fact the box has moved down by 50 pixels and right by 50 pixels but you’ll see a gap or space of where the box originally was.


Now that we’ve explored the basics of CSS positioning in Dreamweaver CS6, there’s a lot more to be covered!  The rest is more so on techniques and methods on how you can use the mechanics of CSS to create some complex layouts, but that’ll be in some future tutorials. So keep a look out for future updates!!

Related Videos
Comments (0)

You must be logged in to comment.

Core Dreamweaver CS5
Dreamweaver CS5 101
Dream It. Do It.
Do you want to learn Core Dreamweaver CS5?
Yes, I want to learn!
No Thanks, I just want to read the article.
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: