Navigation Bar

Here is an example of a two column layout page, using floats.

Your assignment will require you to make at least a two-column layout, and I recommend you to add more pages to your site. It's quite easy once you have a design. Just copy and paste your index page into a new file and change its content.

Try not to use clashing colors, use the Color Schemer to find a good theme for your site.

Wonder how I did stuff on my example site? Just use Google or look at the references on the website.

You may wonder how to add things underneath your two column layout. When you are floating objects, things will appear underneath them in strange places. It's hard to explain, but you must "clear" both sides of the floats to be able to add things underneath.

For example, the next underneath this is outside the columns... but it would appear in a different place if I didn't clear both sides. To clear both sides, you should create a div element with the style attribute, "clear:both;". Just look at the source code for an example.

To center your layout, you have to do some tricky things. The proper way to do it is using the "text-align:center" property and the "margin:0 auto" property.

If I wanted to center this layout, I would do something like:


	    body { text-align:center; }
	    

	    div#container { margin:0 auto; text-align:left; }

We set the "text-align" property to "left" for #container because if we don't, all the text would be centered (cascading styles, everything inherits from the parent). The "auto" part of the "margin" property is in the 'left' place. Remember, margin accepts measurements in this format: top left bottom right. What we are saying is to set the left margin to "auto" so the browser will align it in the center.

To become a CSS Ninja, it's a good idea to use the reference sites on the website to look at CSS articles and learn how to do things.