• discern difference between markup and presentation
• edit presentation layer to achieve a new layout
• position using css float

We're going to learn some fundamentals about webpage layout. You'll have a fixed HTML file to work with and your job is to change the CSS and only the CSS to achieve the desired layout.

The /source directory contains a basic HTML file (blog.html) that models a blog post, including:

1. A page header
2. A navigation bar
3. The blog post content
4. A footer

NOTE: This is slightly different source content than the left-hand and right-hand navigation challenges. Make sure you use the correct source gist!

If you're not familiar with floating in CSS, you might need to take time to read these resources:

• A Step-by-Step Float Tutorial
• Simple 2 column CSS layout

CSS is weird and frustrating for most engineers. The model seems inconsistent and strange at first, but the engineers who master it are treated with awe and reverence.

As closely as you can, edit the main.css file so that the blog post now looks like this:

The entire page is 720px wide; don't change that. The entire .content area should be 600px wide, including any padding and borders. The content area should be flush against the left-hand side of the page.

The right-hand navigation should be 120px wide including any padding and borders. There should be 20px of space between the content area and the right-hand navigation.

The footer text should align with the start of the content text and there should be 20px of space between the footer text and both the bottom of the content area and the bottom of the page.

• A Step-by-Step Float Tutorial
• Simple 2 column CSS layout