This post is part of a series about the basics of creating a CSS layout in Dreamweaver. In the previous post we discussed how to create Div’s and change the sizes. When designing a website, one needs to create “nested Div’s” (which basically refers to a Div inside a Div) so that you have the layout you need for menu buttons, advertisement spaces and so forth. Once you’ve got the basics of CSS layouts, you can start to refine your site with nested Div’s. Step 1 We have already created the three Div’s (in our example they are called Header, Content and Footer – if you are unfamiliar with Dreamweaver, it would be a good idea to keep Dreamweaver open in front of you while reading this post). Once you’ve checked out the Div’s in the browser, go to the CSS Styles panel at the top right-hand side of the page (if you don’t see the CSS Styles panel, go to your window menu – you might have to expand the styles button to see your three Div’s). Now that you can see the three Div’s, select the Header Div to see its various properties, such as the background colour, positioning values etc. *Note: This is an important aspect of CSS layouts: As soon as you draw out a Div in Dreamweaver, the program will create the rules for you. If you double click on the Header Div, a dialogue box will pop up that says “CSS Rule definition for Header” – this dialogue box has all the different categories for the rules of this Div and this is where you can control the font, set a border etc. If you click on the Positioning button in this dialogue box, you will get the Width, Height and other fixed values of the Div’s positioning. You will notice that the Type setting in this box is “absolute” – that’s what Dreamweaver means by calling the Div’s an “AP Div” – it stands for absolute positioning Div. If you have some time, explore the different options besides “absolute” to see what other creative aspects you can bring to your Div. Step 2 For our example, we are going to put a nested Div inside the Content (middle) Div that we have drawn. Click inside of the Content Div and then click on the Code button at the top left side of the page (this will show you the coding behind your Dreamweaver site). Scroll towards bottom – you’ll see the three Div’s that Dreamweaver created for you: <div i.d=”Header”></div> <div i.d=”Content”></div> <div i.d=”Footer”></div> Seeing as we clicked on the Content Div, the curser should be in this line of code: <div i.d=”Content”></div>....