Introduction to CSS Positioning Properties Part 1 - Basic definitions
(Page 2 of 6 )
Let’s start by explaining the basic concepts inherent to visual presentation:
ViewPort: The ViewPort (or window) is the area of the screen in which our Web page is displayed. This concept must not be interpreted as the the Initial Containing Block, since it’s completely different, as we’ll see in a moment.
Initial Containing Block: The Initial Containing Block is the whole space assigned to our Web document. When we’re referring to the whole space, we’re including any sections of the page that users must scroll to in order to see them in the Viewport. It’s also possible to define and limit the size of the Initial Containing Block by setting the width and height properties of the Root element. Now, let’s see what the root element is.
Root element: The Root Element is generally defined as the <html> element. Some older browsers interpret that the root element is in fact the <body> element, such as IE 4 and IE 5.5. However, newer browsers consider <html> to be the Root element, since it is the root positioning context of a document in a purely W3C-compliant environment. In order to apply a specific style to the root element in a safer way and avoid possible difficulties, any CSS declaration should be implemented to both elements together, the <html> and <body> elements, as follows:
<style type="text/css">
html,body {
/* style rules go here */
}
</style>
Quite simple, right? Let’s move on a little bit, and define some other key concepts inherent to CSS positioning.
Containing blocks: In each Web document we have containing blocks, which are elements that usually wrap many other elements inside. More specifically, <div> elements are best suited to contain any other page elements, behaving as real containing blocks. According to O’Reilly’s HTML reference, "the <div> element gives structure and context to any block-level content in a document. It’s more convenient to use the <div> element as a wrapper for multi-element content that is to be governed by a single style sheet rule."
As we can see, <div> elements are true containing blocks, as illustrated in the following examples:
<div id="content">
<div id="news">
News content goes here
</div>
<div id="articles">
Article content goes here
</div>
</div>
In the above example, the "div#content" element is the containing block for the "div#news" and the "div#articles" elements. Certainly, <div> containing blocks are not limited to wrapping other divs. They’re extensively used to contain several HTML elements, such as:
<div id="content">
<p>Paragraph conten goes here</p>
<p>Paragraph conten goes here</p>
</div>
This sample shows a containing block, that is, the "div#content", wrapping up two paragraph elements, which along with the <div> element, are considered as block boxes. However, <table> elements or any block-level element, such as <p>, or header tags are considered containing blocks, because they’re extensively used to wrap content and utilized for element layout. So, it’s time to define the different types of boxes in CSS positioning.
Next: Inline and block boxes >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 8 
