This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.
In the beginning, there was the box....
A HTML document is a series of (rectangular) boxes, stacked either one inside the other or one after the other.
The original box is the <HTML></HTML> itself. Within this box is another box, the <BODY></BODY> box, and inside this box are other boxes, like a <H1></H1> box followed by a <P></P> box, followed by another <P></P> box that has an <STRONG></STRONG> box inside and so forth.
This model also shows the difference between block-level elements and inline elements - a block-level element begins and ends a line, the inline element does not and is placed within another element. Click here for an Example of the normal flow (static positioning) of HTML.
This is the normal "flow" of any HTML document, and CSS's most powerful feature is its ability to define a variety of properties for all of these boxes. That gives you the option of taking boxes out of the normal flow and positioning them.
If an element does not use any positioning methods, it is positioned "static", that means within the normal flow of the HTML document. The positioning properties allow you to specify the left, right, top, and bottom position of an element
With CSS, an element (a box) can be positioned either fixed, absolute or relative, and positioned elements are placed in relation to their containing blocks (but are not confined by this containing block).
Aha. OK: what is a containing block? Think of it as a box that contains boxes, sort of a container. Static (non-positioned) elements use the "initial containing block" or "root element", and this is the <HTML></HTML> box.
For a fixed element, the containing block is always the browser window (or view port) - that means the fixed element stays at the same place in the window - like a frame.
The absolutely positioned element is taken out of the normal flow of the document and the space it occupied in the static flow will not be preserved. It is placed with absolute position properties inside the root element, and root element in this case describes the closest positioned ancestor. If there is no positioned ancestor, the initial containing block (= the <HTML></HTML> box) will be used. So it is placed at a certain position, regardless of any other elements that may already be placed at this position due to the normal (static) flow of the document.
A relatively positioned element does not have a containing block, it appears to be part of the normal flow. It is moved via the positioning properties (top, right, bottom, left) away from its normal (static) position within the document flow and placed somewhere else while preserving the space it would occupy in the static flow; it takes up space and moves its neighbours away to make space for itself, just like all statically positioned boxes.
Here is another Example that shows you relatively and absolutely positioned elements.
That's the theory. A short reality check shows us that "fixed positioning" is a silver lining on the horizon of hope, relative positioning is buggy (applied inline to a DIV element containing a table can crash older browsers), and absolute positioning is something that prevents certain JavaScripts from being fired within that element - in NN 4.xx, of course...where you also take great care not to position <A> elements, because then they become unclickable...and, as far as I know, you can't position dynamically generated content...
But we can make it work!
Instead of being utterly discouraged now, we take all that theory, keep it in the back of our heads and start to position our elements where we want them to be. With a little tweaking here and there and the cunning application of rules to achieve our goals we can position what we want where we want it.
For example, our Navigation:
You'll find here some links that explain the theory: Visual Formatting by the W3C, and BrainJar has a Positioning tutorial.
