The Box Model

There has been a lot of talk on the Box Model and this issue alone over the past years has produced a lot of gray hair for (new) web designers. But understood it really is quite simple.Here is the quick refresher:

boxmodel1.jpg

Most browsers do as above: width + padding + border + margin = total width of 350px.

But not IE6 or IE5, here it goes: width – border – padding / width + margin = total width of 250px.

If you want more information, 456 Berea Street has a nice page explaining this in-depth.

There are several ways to handle this issue (many hacks can be found across the web) but the easiest and simplest way is to avoid it all together and to never add padding to an element that has its width defined. Add the width to its parents or children instead.

Margins

Margins between two paragraphs will collapses to the higher value of adjacent vertical margins. As an example if the paragraph has a top of 20px and bottom margin of 30px, it will not be 50px between the two paragraphs but collapes to the larger margin and result in 30px between the 2 paragraphs.

2 elements contained within each other will also collapse their borders to the larger value if there is no border or padding separating the two. Empty elements with no border or padding but margin defined will also collapse onto each other.

Positioning

Block elements examples are <h1>, <div>, <p>, whereas inline elements would be <span>, <em> and <strong>. To change the level of the element, you use the display property. Elements on a page follow the natural flow of one block element after the other, if not otherwise defined.

Relative positioning starts off with the location the object is within the natural flow of blocks. The e.g. assigned left {15px;} will then move the block from that point 15 pixels to the right. The natural flow of boxes will continue.

Absolute positioning takes the box out of the natural flow and following boxes will behave as if not there. The absolute positioned element will take it’s zero coordinates from its closest ancestor which has a position, and, if not available, will go up in the hierarchy until the first, positioned element which would be the <body> (or <html>) element if nothing else has been defined.

IE6 (and IE5.5) bug: right or bottom values for absolute positioning to a relative positioned ancestor will be set to the canvas if the relative positioned ancestor has no dimension set. Setting height and width of this ancestor will remedy the problem.

Floating

Same as with absolute positioning, floated boxes are taken out of the normal flow of objects. If you float several boxes, they will float against each other and again will behave like a string of objects.

Floating line objects (e.g. paragraphs) against floated boxes will make the line object float around the box (text floating around an image). To stop line object to float around a box, you need to apply a clear to the item which you do not want to float around the other.

Clear

The problem you can encounter with floats is that due to the fact that they are taken out of the normal flow of objects the surrounding box will not expand to encompass the floated elements. In such a case, if you want to apply e.g. a background-color, you need a way to force the surrounding container to expand.

To achieve this you can for example add a clear property within that surrounding container, after the contained floats. If you can add this clear to a meaningful element (e.g. #footer), the better. A great way to make containers expand is shown at SitePoint – using overflow {auto;} on the outer <div> is not only simple and beautiful but also keeps your HTML code lean and clean. If this solution for some reason does not work for you, you might need to add the clear as a separate code element into your html, for example as <br style=”clear:both;” />.

Happy formatting!