Can anyone explain CSS, DIVs and Layouts? 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.
You can read the details about how to do this in my book. You can see examples at my book's website
http://cssdesignpatterns.com Especially check out the following examples in Chapter 17:
http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Floating%20Section/example.html http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Float%20Divider/example.html http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Fluid%20Layout/example.html http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Opposing%20Floats/example.html