Now I want to add another div for the main area of the page, and again, this is a place where I like being able to see what's happening in the code, because trying to position your cursor in the Design area can get really tricky. So I want my cursor right here before the final close div of my container, but after the div closes for my top div.
I am going to add a couple of returns here in the code. Of course that won't affect the display at all. I am going to double click to insert a new div there. Select it and choose New Style.
Now, if you select something in the code and you see the task pane grayed out, just click anywhere in your design area, and it will activate the task pane, so you can use the New Style link.
I am going to call this one main, and again, starting with the pound sign; this is an ID style. For now, I am not actually going to create any formatting for this container. I am going to use this just to separate the main area of my page from the top area of my page. Separating the top and main areas of the page gives me more flexibility when I want to further divide the sections of the lower part of the page later.
Let's check the Apply new style box, so that we apply it as we create it. Now we are going to create another style inside the main style. Again, I can add some space in my code if I want. Put my cursor there. Double click to create a new div, select it, and click New Style.
Now, this div is going to be for that little box that floats up in the left and has all of my Navigation elements. So I am going to name it navbox, because it will help me keep track of which div it is.
In the Background category, I want to set a cream color for this little box. I have the hexadecimal code that I want. So this hex code is #FFFFCC. You can use the Color Wheel or you can type in your own hexadecimal colors; just make sure you start with the pound sign if you are going to type it in like this.
With this style, I also want to add a border around my div. So let's go to the Border category. I want this to be a solid, thin, black border.
For Position, I want the Width to be 150 pixels, and make sure you check Apply as you create the style, and magically, my new div positioned, colored, and if I click over here you will see better, with a black border. All that in one elegant little style.
Finally, let's add one other div inside the main div, but outside the navbox, where we will be placing most of the dynamic content on this page. This is also the div that will turn into the content container in this master page. So I can try clicking here in Design view, but as I warned you, it can be tricky to get your cursor where you want it.
So here in Code view, I know I want this outside the navbox, so I will put it after the navbox div, and before the final close div you see down here. Again, just double clicking on the div icon in the Toolbox, selecting my div, New Style, and I am going to call this style, content.
I want to set a Width in the Position category. I will make this one 585 pixels wide. In the Box settings, I am going to give it 10 pixels of Margin at the top, because I really don't want both of these divs to line right up at the top. In fact, I am going to go back and add a little Margin to this one as well, and you will see, if you have two divs aligned side by side and they both have the same top Margin, they will line up very nicely in your design.
The last thing I want to do with this div is set the Layout, float, right, and make sure we have clicked here to Apply the new style as we create it, and click OK.
Now let me go back and modify the style for my navbox. You don't actually have to select a div when you are modifying the style, we have already created it, its already applied. Right click, choose Modify Style. In the Box category, I am going to put 10 pixels of Margin all the way around this div. We click OK.
Now we still have one more challenge because these two divs should be side by side and perfectly aligned. I want to show you a little bit about troubleshooting. So this is on the left and this is on the right and we want them to be aligned next to each other. Notice that when I roll my cursor over a style, you can see exactly what's set there, even without opening the Style dialog. So I can tell that this one is floated to the right, and its got top Margin 10. Now let me look at navbox, its got top Margin 10, but look at that, its not floated to the left. So even though this one aligned to the left when we created it, it's not actually floated to the left, and this is where working with styles can get so frustrating. One little detail like that can throw the whole design off.
So let's go back, right click, Modify Style, in Layout, let's float it to the left, and now you will see they line up perfectly. Content is floated to the right and navbox is floated to the left.
