wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes CSS, DIVs and Layouts Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCM Java EE 6 Enterprise Architect Exam Guide this week in the OCMJEA forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS, DIVs and Layouts" Watch "CSS, DIVs and Layouts" New topic
Author

CSS, DIVs and Layouts

Anthony Della Rosa
Greenhorn

Joined: Mar 19, 2007
Posts: 12
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


- Mr. D
greg buela
Ranch Hand

Joined: Sep 04, 2007
Posts: 71
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.


SCJP 1.5
Mike Bowers
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
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
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: CSS, DIVs and Layouts