Basics of CSS positioning

In my thesis I investigate the possibility of developing a tool that visualizes any web page as a 3D model. If you don't know what I am talking about, here's a video of the first mock up.

In my last post I took a dive into my first research question: Is the DomScape visualization possible? Apparently CSS positioning is a bit more complex than I first imagined, because I ended up more confused than I was before I wrote that post. I finished the post with the intent to research the CSS 2.1 Specification. Especially the parts that revolve around the positioning of elements are subject of my research: Section 8. Box model, Section 9. Visual formatting model and Section 10. Visual formatting model details. In theory those documents are all I need - in practice they are rather technical and very, very dry.

Good thing I found CSS: The Definitive Guide by Eric Meyer, which is a very comprehensive and detailed book on CSS. It's a bit dated, but the concepts behind the CSS 2.1 specification haven't changed anyway. It basically goes through the entire specification to explain how CSS is meant to work and what the intricacies are. Because Meyer focuses a lot on edge cases his book is good way to find out where potential challenges lie for DomScape.

Matryoshka metaphor
In the last post I also introduced the concept of the Matryoshka or 'landscape' metaphor, which I use to indicate a certain property of the DomScape visualization. It means that the way DomScape makes a 3D representation of a 2D web page, is guaranteed to work if each element in the web page stays within the boundaries of its parent. There are several CSS properties that break the Matryoshka metaphor, because they do allow an element to extent outside the borders of its parent. As far as I currently understand, this is possible through these CSS properties: relative and absolute positioning, float and overflow. 

The Matryoshka metaphor: elements stack upon each other without any overlap outside the boundaries of a lower element (taken from the DomScape concept video) 

In order to understand how these special CSS positioning schemes work, it is important to get the basics out of the way first. I failed to do this in my last post and I have come to realize that it is hard to discuss advanced CSS positioning without first introducing the core principles of CSS positioning: the CSS box model, normal flow and the containing block.

Box Model
At the heart of CSS positioning lies the box model. Meyer explains the box model as follows, "CSS assumes that every [HTML] element generates one or more rectangular boxes, called element boxes. Each element box has a content area at its core. The content area is surrounded by optional amounts of padding, borders, and margins." In addition to this, the content area can contain any number of other elements/boxes. This creates an hierarchy of elements of which the root element is the browser's viewport.  

 Content area and its surroundings (from CSS: The Definitive Guide)

There are two types of boxes, inline boxes and block boxes. Inline boxes are used to layout text and are generated by elements such as span, a, strong and em. In the default CSS positioning scheme, called normal flow, inline boxes are flowed (placed) horizontally - from left to right in Western languages. Inline elements stack next to each other and wrap to the next line if there's no horizontal space left.

The same inline element: first without and then with line wrapping (from CSS: The Definitive Guide)

Block boxes on the other hand are generated by elements such as div, p and table and are flowed vertically, even if there's space to flow them horizontally. By default a block box fills up the entire horizontal space it is given, unless the width of the element is set to a different value, as is demonstrated in the figure below.

 

Two consecutive block elements (with different content, widths and margins) are flowed vertically (from Mike Hall's article on CSS Positioning).

It is possible to control whether a box is displayed as inline or block by setting the display property to inline or block. This doesn't however if the element is inline or block, but just how it is displayed.

Containing block
Every element has a containing block, which defines where in the web page the element should be rendered. In case of normal flow, Meyer explains, "the containing block is formed by the content edge of the nearest block-level, table cell, or inline-block ancestor box." Often it will be the parent element that is the containing block its children. Note that an inline element can never be a containing block in normal flow.

CSS2.1 also defines a series of rules for determining an element's containing block when the element is not in normal flow, for example when an element is floated or positioned. I will discuss these properties in a later post.   

Conclusion
These are the building blocks of basic CSS positioning. Every HTML element is converted to a graphical box. The CSS is used to adjust the default positioning. By setting the height, width, margin, padding and border it is possible to change how and where an element is rendered. In my next post I will explain what happens when a negative margin is used to position an element outside its parent.