Can anyone explain these to me? I am teaching a web design class and always used tables for layouts. When I took a Dreamweaver class 2 years ago they mentioned DIVs but I didnt understand them enough to implement them in my web pages. Now I see it referenced here with layouts and CSS. I have dabbled with positioning (CSS) in my HTML pages but would like to use the better method in my websites and what I teach to my students
This is a great question. In fact the answer to that question is one of the breakthrough design patterns I present in my book Pro CSS and HTML Design Patterns.
The "Section" design pattern is the basic building block of all CSS-based web pages. It is discussed in detail in chapter 13. The idea is that the <div> element semantically defines a document "divison" or "section". Within the division is a heading that identifies the topic of the division. Following the heading are one or more paragraphs containing the content of the division. This pattern forms the backbone of all content in XHTML documents. You can nest this structure by placing a division within a division.
<div class="section introduction"> <h2>Introduction</h2) <p>This paragraph is about the introduction.</p> </div>
The division is a block element. By default, a browser flows blocks vertically down the page. You can use CSS to alter how it flows. You can absolutely position it, relatively position it, or float it. Using these CSS techniques you can take structural content that is accessible and transform its layout to be visually pleasing.
Chapter 17 of my book shows how to create fluid layouts using an enhanced version of the Section design pattern. Fluid layouts can look just like tables if you want, but they adapt dynamically to the width of the browser. In desktop browsers, fluid divisions can line up side-by-side like columns in a table, and as the width shrinks (like on a cell phone), they will dynamically wrap around so that they are below each other like rows in a table. Fluid layouts can reproduce any layout you can imagine and they fluidly adapt to their environment.
Fluid layouts give you great flexibility, excellent accessibility, and search engine optimization. You can place divisions in your document in the order a person would read them from top to bottom. You can then use CSS to reposition these divisions to different locations on the screen for optimum layout (some divisions on the top, some on the left, some in the middle, some on the right, etc.