Two Column Layout Vertical Menu Tutorial
Style the Page Footer aside Elements
Section 2 Lesson 4
Two Column Layout Vertical Menu Tutorial
Style the Page Footer aside Elements
Section 2 Lesson 4
In this lesson you create a single row grid layout for the page footer.
Step 1: Position the left footer cell.
Add lines 142-144 to the end of the site.css file in your practice folder, then save.
This provides a means to select a section element in the footer element and place it in the first cell. It removes the element from the flow within its container.
Replace line 106 in the index.html file in your practice folder, then save.
Completed Step 1
Step 2: Position the telephone number.
Add lines 145-150 to the end of the site.css file in your practice folder, then save.
Add a class .footer-section-center CSS selector. It will center a block element within its container.
Replace line 108 in the index.html file in your practice folder, then save.
Completed Step 2
Step 3: Position the social media placemarkers.
Add lines 151-155 to the end of the site.css file in your practice folder, then save.
Add a class footer-section-right CSS selector. It will float a block element to the right of its container. It removes the element from the flow within its container.
Replace line 107 in the index.html file in your practice folder, then save.
Completed Step 3
>