Produced by KelbyOne

Building CSS-Based Layout in Dreamweaver

This tutorial covers the process of building a CSS-based layout from scratch using Dreamweaver.


  • Ian McQuade says:

    Very nice…

  • new2css says:

    great tutorial and a big help! one final question, how do you center it so the layout falls in the center of the webpage and not to the side in firefox and internet explorer?

  • Roxana says:

    Please, a 3 column layout.
    Merry Christmas – Happy Hannukah!

  • Roxana says:

    Sorry. I forgot to thank you. I love your tutorials!!! I have read CSS books and still couldn’t get the positioning right, but with your tutorial I finally understood it.

    However, I still have troubles positioning the nested divs, so could you please finish your tutorial?

    You missed the positioning of the nav, etc., the nested divs inside the header.

    Again, thank you sooo much for your tutorials!

  • chris says:

    Big mistake showing an absolute positioned layout to beginners. AP layouts are fine if you know your content is never going to grow past the 440 fixed height of the content div, but if it does then you have to reposition everything below it. You make it sound so easy to layout a basic site, but with AP you know this can get messy very fast. You should have explained this at the beginning of your tutorial in my opinion.

  • josh says:

    do you have to use CS4 to do this

  • Darryl says:


    You can do it in cs3 just slight differences, josh.

    Again, this is just one method to start getting peoples heads around how you can create a layout, its not meant for every situation, but again thats not the scope of the tutorial. Thanks for sharing.

  • Dzash says:

    I agree with Chris…AP is a bad place to start. The output is bound to generate frustration and there’s no quick fix once the layout is filled with content. Or is there???

    To Josh – I followed along perfectly with CS3

  • Rich says:

    Are there more tutorials by Mr. Blake available?

  • James says:

    When using ap divs on any computer screen no matter the size they are the same number of pixles from the left side causing some issues can you help me to understand better the point of using css im kinda a newbie at this i usually use flash to make my websites

  • willis says:

    Wow what a help this was, thank you.

  • ghoyho says:

    very, very good…(muy bueno, me sirvio mucho para iniciarme en dreamweaver)

  • Michael says:

    Ian: centering the divs is actually quite easy, just skip the absolutely positioned stuff. and add the following CSS to each div:
    clear: both; /* Keeps the elements vertical */
    margin: 5px auto; /* The 5px is top and bottom, the auto centers horizontal */

  • Charles Lindauer says:

    I can’t see any video on this page… I have the latest QuickTime and Flash Player… Is it just me?

  • Joe.B says:

    Nice and simple.
    1260 is your page width.
    990 is your Header Footer Etc.
    1260 – 990 = 135
    change to L (0px)on the Header Footer Etc to 135px
    Great tutorial.


  • Rebecca says:

    Thank you for this tutorial! I’m learning Dreamweaver on my own and this was an excellent explanation on how to create a layout.

  • bruce says:

    you are good! Thank you.

  • Victoria says:

    Simple and to the point. This tutorial helped me get over my dreamweaver block a bit by just doing it. Thanks bunches!

  • Brett says:

    Just got dreamweaver with the cs4 design suite, i had always been a skeptic of wysiwyg’s, but decided since i bought it i better learn to use it. First tutorial, and excellent. Very descriptive and easy to follow even without watching the screen.

  • Jennifer says:

    This was a wonderful tutorial. Just tremendous. Could you please complete it with all the added fill-ins.

    Thanks so much for what you have shown so far.

  • Mónica says:


    Very usefull!!!

  • satu says:

    Very useful for biginners!

  • smic03 says:

    I was able to follow with CS3 very easily as well! This is a great tutorial for helping the brain move in the CSS direction! Thank you thank you!

  • angel says:

    Thanks great tutorial!!!!!!!!!!
    Thanks GREAT

  • user10 says:

    This is an excellent tutorial for those unfamiliar with css. Great job!

  • Emily says:

    Tried this with CS4 but there is no “Advanced Selector Type” so I used “ID (Applies to only one HTML element).”

    My content (an swf) centers horizontally, but NOT VERTICALLY, does anyone else have this problem and is there a solution?


  • rashmi says:

    Thanks great tutorial!!!!!!!!!!

  • Oliver says:

    thanks! very clear and helpful.

  • Leslie Schlak says:

    Thanks!! I knew most of it, but it’s all what i’ve taught myself, this and another of your videos helped out A LOT!! now I can get building!!

  • Julie says:

    Is there any way of centering the whole page? I have done my divs separately as you did.

  • Gabe says:


  • Mhar says:

    wow! fantastic!
    hats off …………………… Geoff!


  • Igor says:

    Hello;this is wrong information!!
    When this site is seen on a different size screen,the layout will move to the right.
    You may never use position:absolute.
    Very bad!!

  • Rob says:

    I have to agree with Chris and the others….I don’t mean to come across negative, but using the “Draw AP Div” tool is a really disruptive way of creating CSS layouts. Absolute positioning is something you want to use sparingly, not for every DIV. When you do apply AP to every DIV, you run into problems.

    I appreciate the time this author took to create this layout, but I think there are better ways of handling this.

    I prefer working solely in CODE view and forget doing CSS in Design view. You learn more in Code view!


  • linda says:

    testing comments again

  • Cristian Dorobantescu says:

    Interesting tutorial!

  • You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.