Two Column Layout Vertical Menu Tutorial
Style the article, aside and footer Elements
Section 1 Lesson 7

Add lines 74-81 to the end of the site.css file in your practice folder, then save.

There are no changes in the index.html from the last lesson. The lines that are impacted by the CSS changes are highlighted.

Completed Step 1

For layout the article element has its float property set to left. This set you up for the two column layout. The article element will become the first column. The aside element will become the second column.

However the footer element also appears in the second column.

Add lines 82-91 to the end of the site.css file in your practice folder, then save.

There are no changes in the index.html file from the last step. The lines that are impacted by the CSS changes are highlighted.

Completed Step 2

The main change is the the aside elements representing the blog content are more defined.

>

Add lines 92-99 to the end of the site.css file in your practice folder, then save.

There are no changes in the index.html file from the last step. The lines that are impacted by the CSS changes are highlighted.

Completed Step 3

The key change is the the clear property set to float. This placed the footer on its own row.

>

Add lines 100-103 to the end of the site.css file in your practice folder, then save.

This step displays the footer element’s the three section elements as a row layout by using the display property inline value.

There are no changes in the index.html file from the last step. The lines that are impacted by the CSS changes are highlighted.

Completed Step 4

Add lines 51-58 to the end of the index.html file in your practice folder, then save.

This step displays the footer element’s section elements in a row layout.

There are no changes in the site.css file from the last step.

Completed Step 5