In order to understand positioning with CSS, you must first understand the box model, but before explaining the box model, here are a few helpful definitions that I will be referring to throughout this post:
—
The Viewport
The viewport is the area on a browser that displays the webpage. Imagine that your browser is a window, with the outer edges being frames and the area that displays the webpage (the viewport) as the glass. The viewport is separate from the page itself, so even if the page is scrolled, the viewport is always the area that you can see.
The Initial Containing Block
The entire space assigned to your document. The initial containing block is set by the web designer as the size of the web page. This includes parts of the page that users have to scroll to see.
Containing Blocks
A containing block has another element inside of it. In the example below, the div named “container” is the containing block for the div named “element”.
<div class=”container”>
<div class=”element”>
</div>
</div>
Normal Flow
The normal flow of the document is the order in which the elements are displayed. It is the way a document would appear with no positioning or floated elements. The content will start at the top of the page and flow downward.
Block-level elements
Elements that are formatted visually as blocks. Block elements automatically create a line break, unless given the rule, “display:inline;”, which will cause them to be treated as an inline element. Examples of block-level elements are:
<div>, <h1>, <p>
Inline-level elements
Inline elements do not form blocks of content and are displayed visually in a line. They do not create line breaks. Examples of inline level elements are:
<b>, <em>, <span>
The Box Model
Take a look at the image below. I have taken it directly from the W3 site, in order to illustrate the box model, and why it’s important to positioning with style sheets.
For display purposes, every block-level element in a document is considered to be a rectangular box. As you can see from the diagram above, each box is comprised of 4 parts:
- Content – This could include text or an image.
- Padding – Invisible area that defines the distance from the border of the box to the content.
- Border – The area surrounding the content and padding.
- Margin – Invisible area that defines the space between the outside border of the box and other elements on the page.
It is equally important to understand how the width of the box is calculated, and why defining only “width” isn’t enough. Here is the equation to determine the width of a box:
width = margin-left + border(left) + padding-left + content width + padding-right + border(right) + margin-right
For example, look at the code below and try to determine how wide the box will be:
.divtest {
position: relative;
width: 100px;
height: 75px;
padding: 10px;
margin: 5px;
border: solid 1px black;
}
According to the box model equation, this box would be ‘132px’ wide, as illustrated by the image below.
Width = margin-left(5) + border-left(1) + padding-left(10) + content width(100) + padding-right(10) + border-right(1)+maring-right(5) = 132
Height
Height is calculated differently than width. In the normal flow of a document, vertical margins are collapsed. That means when a box is placed on top of another, the distance between the two is equal to the largest margin, as illustrated by the image below:
If these two boxes had been placed next to each other, the margins would be added together to create a total of 15px. However, since they are placed on top of each other, the margins are collapsed and only the largest margin is used.
It is very important that you understand the box model before moving into positioning. Whenever you place a block-level element on a page, you must be aware of the 4 attributes explained above which determine placement and size. For information on positioning with CSS, please read the next post in the forum entitled, “Positioning with CSS”.