web page layouts

This is a simple css layout. CSS layouts can be confusing at first. For those who developed web sites using tables as the layout structure, the basic premise of css layout is totally different.

You were probably used to the table layouts growing to fit your content and shrinking if no content was in a row or column, and using clear gifs to ensure a minimum width or height. In css layouts we have the box model which is necessary to understand css layouts. There is a good explanation at 456 Brea St.

All containers (boxes) in this page are designated by id tags. All id containers in this page were given attributes to place a border around the respective container. id containers start with a # symbol in the style sheet rules and are shown in their respective containers. An explanation of the id, class and basic html page can be found on the World Wide Web Consortium (W3) W3 web site. This is good basis for learning HTML and XHTML.

book recommendations

I bought Rachel's book but when I researched the two books they seemed to cover 95% of the same material. Both of them will answer many questions about how you do this or that. I think both cover some basic css layouts as well. Well worth the money and good learning tools.

This Page Structure

The header sits by itself at the top of the page and is outlined in a turquoise color. I've used relative positioning for the header. An explanation of why one might do this can be found on the StopDesign web site. However you might want to delve into the information below first and return to this link later.

The Main and Nav divs are enclosed in the Maincontainer div. The Maincontainer div is outlined with a dashed red border.

The footer is outside and below the maincontainer and is outlined with an orange border.

All div tags are specified in the source code for the page similar, to the following manner -
<div id="main">
and every selector tag in xhtml must have a closing tag. The closing for any div tag is </div>.
There is a method of closing an empty tag as well. Here is an example of a line break tag,
<br />

The bottom of each division shows the CSS rules with the exception of the maincontent css which can be viewed in the source code of this page. It is included below as I could not add it to the page, in it's container, without complicating and maybe confusing the beginners reviewing this.

Wow that was a fly through. Check out the source code for the page. All the styles are included in the source code. Having your style sheets linked instead of embedded in your page is the way to go, but in this case it makes it easy for you to see the style rules and the html. Now head off to Basic & Navigation

#maincontainer {
float: left;
width: 100%;
border: 3px dashed #FF0000;
}

#main {
width: 51em;
margin-left: 15em;
border: 1px solid #000000;
}