4. Building layout #3

In this tutorial we going to horizontal all Navigation Div Tags, and we going to complete the layout for body, right column, and footer.

Next double click the (a)#website_wrap #Navigation, when CSS Rule Defenition box pops-up in the Category choose (b)Box then in (c)Float: choose left from the drop down arrow, and hit OK. (Your Navigation Div Tags should look a bit messed up, so what happend is we made that Navigation Div Tag float.)

Now repeat the same steps for Navigation2, Navigation3, and Navigation4. (Now you should have all Navigation Div Tags stacked horizontaly. Think of them as legos or tetris, when you going to make them float they will get stacked up. For example if we would make width of Navigation Div Tag more than 410 pixels then it would not fit in the same line with other navigation Div Tags wich will force it to move to next row below. Feel free to play around and get comfortable with it, you can always come back and change settings.)
Now you should have what I have in the picture below.

Next we going to create Body Div Tag, so click on Insert Div Tag button, when box pops-up in the Insert: choose After Tag, then in box to the right choose <div id="Navigation4">, then in ID: type in Body and hit OK.

Next create New CSS Rule, when box pops-up, in the Selector Type: choose Advanced, then in Define in: choose layout.css and hit OK.

When CSS Rule Definition box pops-up in the Category choose (a)Box, then in (b)Width: type in 550 pixels, in (c)Height: type in 600 pixels, then in (d)Float: choose left, next in the Padding in the (e)Top: type in 15 and make sure the (f)Same for all box is checked, then choose background color, (I chose Dark Grey) and hit OK.
(So basicaly Padding will create 15 pixels space at the eges of our Div Tag so our body text doesn't touches the edges of our Body Div Tag.)

Next select a text iside Body Div Tag and delete it, then type in Body text.
Next we going to create Div Tag similar to Body, so click on Insert Div Tag button, when box pops-up in the (a)Insert: choose After Tag, then in box to the right choose (b)<div id="Body">, then in (c)ID: type in Right_Column, and hit OK.

Next create New CSS Rule inside Right_Column Div Tag, when box pops-up in the Selector Type: choose Advanced, then in Define in: choose layout.css, then hit OK.

When CSS Rule Definition box pops-up in the Category choose (a)Box then in (b)Width: type in 190, then in (c)Height: type in 600, then in the (d)Float: choose left, then in Padding in the (e)top: type in 15 pixels and make sure the (f)Same for all box is checked, then choose background color, (I chose draker grey) and hit OK.

Next delete the text in Right column and type in Right column.
(You now should have Right column perfectly fitted with Body on the same horizone.)
Next we going to create footer, so click on Insert Div Tag, when box pops-up in the Insert: choose After tag, then box to the right choose <div id="Right_Column">, then in ID: type in Footer, and hit OK.

Next click on New CSS Rule, when box pops-up in the Selector Type: choose Advanced, then in Define in: choose layout.css, and hit OK.

When CSS Rule Definition box pops-up in the Category choose Box then in Width: type in 800, in the Height: type in 70, in the Float: choose left, then choose a background color, (I chose red), and hit OK.

Next in the CSS Styles, double click the #website_wrap, when CSS Rule Definition box pops-up in the Category choose Box, then in Height: choose auto, and hit OK.
(So basically what we did is we wrapped all the Div Tags tightly that is inside this #website_wrap Div Tag, which means that website_wrap will expend in Height as needed if we add more Div Tags.)

So now we completed with our website layout, so you should have similar to what I have in the picture below.

And thats the end of Building laybout #3 tutorial.
For next tutorial click here.

Building a Website Tutorials:

1. Setting up the website

2. Building layout #1

3. Building layout #2

4. Building layout #3

5. Creating Banner

6. Rollover Buttons