Each section of the Layout is made from an HTML div tag. A div tag generates a box when we place it on the page. We use divs to 'divide' the page into different sections so as to create a Layout.
A div is also be used to hold content, such as text, images, videos, and so on. We can even place a div inside another div in order to achieve design goals or to add certain types of content.
The default Static div doesn't have any formatting, therefore, we have to create a CSS Style (style declaration) to format and position the div. That CSS Style is applied to the HTML via a CSS Selector. We can use an HTML Attribute to hook the Style to the HTML element.
The above paragraph has quite a bit of information packed into it. The point is this:
A Style begins with a Selector, which is used to target, or 'select' the html element we want to style.
There are many types of Selectors. But let's use an ID Selector for the following example:
Working in Design View, place a div tag on the page. This is the same as writing <div></div> in Code View. And the result is the same: the div tag generates a long rectangular box on the page.
Next, we create the CSS Style. We can use the New style dialog to do this, or we can open the External Style Sheet and write our Style directly onto the style sheet.
Our Style will have a Selector of #header
In order to hook the #header style to the <div> tag, we will use the HTML id attribute. (Expression Web usually takes care of this for us. However, it's good to understand the actual processes that go on under the hood.)
Our HTML will look like the following after we add the id attribute:
And that's it. Wash, Rinse, and Repeat until you have created your layout.
The image above illustrates the CSS Selectors one might use in creating a 2 Column CSS Layout. Each Selector is an ID Selector as indicated by the #.
The above layout is just one example of a 2 column fixed width layout that is popular on the web. In no way must you make your columns stand out as I have. I did that only so you could distinguish one column or row from another.