Two Column Layout And Vertical Menu Tutorial
Add Page Wrapper div Element
Lesson 2

Two Column Layout And Vertical Menu Tutorial
Add Page Wrapper div Element
Lesson 2

 

This lesson adds a div to contain all the layout of the web page. To target it in the CSS file, we are using the id selector #wrapper. In the CSS file we apply the #b3c7e6 color for the background.

The div appears collapsed in the web browser. That is the default nature of block elements until you fill them with content.

Get Skills to Work on Websites in 30 Days

Start today with easy to learn courses that quicky build your website skills!

Completed Lesson In Web Browser

Live Screenshot Web Browser

Exercise Steps

Step 1: In the index.html file in your practice folder add lines 9-11, then save.

HTML Source Code

This is the index.html file.

Step 2: In the site.css file in your practice folder add lines 6-8, then save.

CSS Source Code

This is the site.css file.