Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

CSS, DIVs and Layouts

 
Anthony Della Rosa
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
greg buela
Ranch Hand
Posts: 71
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I think you should look around for CSS Layout tutorials and examples. Google them, there are many out there and you will find them helpful.
 
Mike Bowers
Author
Ranch Hand
Posts: 42
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic