The CSS Box Model

18
May

This is a quick introduction into the world of CSS (Cascading Style Sheets) and its matrix called box model. This article adresses beginners in the fields of webdesign and CSS-development. In order to work with the following technique, you should be familiar with the basics of HTML-coding.
The methods of developing websites with the use of tables, frames or iframes are obsolete because the sourcecode of those techniques lacks quality (not XHTML conform, unnecessary sourcecode, not suitable for search engines and so on). You could be familiar with the use of tables in order to design your websites so at the beginning it may be a little difficult to switch to CSS. If you need some help to start with CSS, you could search the web for tutorials (there are some beginner tutorials, e.g. on W3C or About.com).
So this article deals with the basics of how the basic CSS-elements are assembled. The “boxes” or “containers” in CSS are called “divisions” which are declared by the DIV-tag. A basic DIV-construction with an included CSS-style”-tag (“inline-style”) may look like this:

<div style="width:300px; height:200px; padding:10px;">Text</div>
You may also declare your own IDs or classes in order to structure your code, so the HTML/CSS-code of our example would be:
<html>
<head>
<style type="text/css">
/* <![CDATA[ */
div#examplebox {
    width:300px;
    height:200px;
    padding:10px;
}
/* ]]> */

</style>
</head>

<body>
<div id="examplebox">Text</div>
</body>
</html>
This is the topology of a typical CSS-cponstruction. The DIV-container in our example is declared with the CSS-ID “examplebox”. The box has CSS-properties which define its width, height, inner spaces (padding) and outer spaces (margin). All properties are set by using Pixel-units whose shorthand is “px”. The main topic of this article is how the position-properties of a DIV-container are defined. Below you can see a schematic view of the CSS Box Model.
The left figure shows a three-dimensional view of how the CSS-properties are ordered. As you can see you can define many spaces in your DIV-container so there’s a lot of freedom to design your website with CSS.
The right figure illustrates the names and positions of the certain properties so every property is self-explaining. The names shown in the figure comply with the names of the CSS-properties, so “border-top” for example is the space between “margin-top” and “padding-top”. The “border-property“ is the only property which can have a color (hexadecimal code) which is declared with the “-color”-definition. A colored bottom-border would be declared like this:
<div style="border-bottom-color:#FF0000; border-bottom-style:solid; border-bottom-width:10px;">Text</div>
This code would produce a box with a border at the bottom which is red and 10px thick (solid). So margin and padding can’t have a color because they are transparent.
Now let’s have a look on how the CSS-code has to look like for those DIV-containers with margin, padding, size and position-properties. I’m only showing the “<style>…</style>”-part which has to be placed in the “<head>…</head>-part of your HTML-code (as you can see it in the code above – I’ll skip the "CDATA"-part which should be used together with inline-styles in XHTML-documents).
<style type="text/css">
div#examplebox {
    position:relative;
    top:120px;
    left:20px;
    width:300px;
    height:200px;
    margin-top:8px;
    padding-top:10px;
    padding-bottom:5px;
    border:2px #FF0000 solid;
}

</style>
The code defines only some CSS-properties: top, left, margin-top, padding-top, padding-bottom and border. All other properties which aren’t defined will be set to the default settings (e.g. padding-left and padding-right are set to 0px as default). The code also contains a CSS-shorthand which is the “border”-property: I’ve defined three values in one line (style, width and color) so the border in our code would be 2px thick and red-colored. The “style” is set to solid but you can choose between some more properties. Also take note of the “position:relative;”-property which sets the position of the DIV-box relative to its parent (the parent can be another DIV or the BODY-element). The relative position of our box is defined by the properties “top” and “left”. There are also the position-properties “position:absolute;” and “position:fixed;” which have a different effect on the position of a DIV-container. The property “position:absolute;” is used together with the values “bottom” and “right” (“top” and “left” are also working of course) – if you set the properties to “bottom:0px;” and “right:0px”, the box will be placed at the very bottom right corner of your browser-window. The box is only placed at the bottom right corner the browser-window, if the corresponding DIV-box has the BODY-element as container. If the box is placed in another DIV-box, the “position:absolute;”-property behaves relatively to the parent container – with the difference that you are able to use the “bottom” and “right” properties.
So the CSS-properties margin, padding and bottom can be written as shorthand. The definitions of right, left, top and bottom go clockwise starting from “top”. To understand what I’m meaning, just take a look at the following code:
<style type="text/css">
div#examplebox {
/* One line per property */
    margin-top:5px;
    margin-right:3px;
    margin-bottom:8px;
    margin-left:2px;

/* Shorthand - margin: top right bottom left */
    margin:5px 3px 8px 2px;

/* Another shorthand - margin: top/bottom left/right */
    margin:5px 2px; /* = top/bottom:5px and left/right:2px */

/* And a three-value shorthand - margin: top right/left bottom */
    margin:5px 2px 4px; /* = top:5px, left/right:2px, bottom:4px */
}

</style>
These are basically the things you should know in order to work with the box model. If you have understood how the properties of a DIV-container are working there’s one more difference left which refers to the calculation of the total width and height of DIV-containers. Microsoft Internet Explorer has a different calculation of the box-size when it’s in Quirks Mode so take a look at the figure to understand the difference.
The figure demonstrates the difference on the width-property but this difference also refers to the height-property of course. As you can see you have to think of the total width/height of your DIV-boxes in order to retain an accurate design. For example if you set the properties “width:200px;padding:20px;” to a DIV-box, the total width is “240px” in Firefox/Opera/Safari while in Internet Explorer, the total width is only “200px” because Internet Explorer doesn’t add the padding/border to the “width”-property. As mentioned above, this difference only appears when Internet Explorer is in Quirks Mode (which is set if you don’t define a Doctype (DTD) for your HTML-document, so always set a DTD but don’t set “<?xml version=“1.0” encoding=”…” ?>” because this line will cause Quirks Mode in Internet Explorer 6). If you define a doctype (e.g. XHTML 1.0 Transitional), the calculation of the total width/height in Internet Explorer 6/7 will behave like in other browsers. Internet Explorer 5 (on Windows) will always “use” the wrong calculation.
Always test your CSS-configuration in as many browsers as possible because there may always be some differences with the interpretation of CSS-code.
Just experiment with the use of CSS because it’s an ease to work with.

Article postedPosted in @ 05/18/08