• Introduction
• The Box Model
• The Internet Explorer Bug
• Table Layout vs. Div Layout
• Conclusion
• References

Introduction

According to Håkon Wium Lie and Bert Bos (1999), separation of a document’s structure from its layout had been a goal of HTML since 1990, and the need for this separation became even more apparent as the Web became a means of electronic publishing in 1994. Cascading Style Sheets (CSS) was developed by the World Wide Web Consortium (W3C) in 1996 as a style sheet used in markup language to separate the document content from the document presentation (“CSS Developer Guide,” 2014). An interesting concept that Lie and Bos noted in Cascading Style Sheets: Designing for the Web, was how CSS took into account that neither the author nor the reader could design a Web style document on their own, but rather their wishes had to be combined, or “cascaded,” together.

There are various levels of CSS, each building on the last. The box model was first introduced in CSS 1, called the formatting model. CSS 2 and CSS 2.1 added revisions to the box model, further detailing its properties. However, earlier versions of Internet Explorer did not correctly display the box model on a web page, with the issue being described as the Internet Explorer bug. Christina Haas (1999) mentions Wiebe Bijker’s theory of sociotechnical change in "On the Relationship Between Old and New Technologies," explaining the role of contingency and constraint in the use of literacy technologies. This aspect of Bijker’s theory can be seen in user preferences for either the table layout or the div layout, depending on how easy it is to use and maintain.

 

The Box Model

The box model is a div layout in CSS to create a design and layout for web content (Pearce). There are four distinct parts to the box model: margin, border, padding, and content (Child, 2004).

CSS 1 introduces a simple, box-oriented formatting model, all with a core content area surrounded by optional margins, border, and padding (Lie & Bos, 1996).

According to W3C, CSS 2 and CSS 2.1 added more details to the formatting model in CSS 1 and refer to it as the box model. Each box still has a content area with optional surrounding margin, border, and padding, but these properties can be further broken down into top, right, bottom, and left segments. The content width and height depend on whether the box contains text or other details.

 

The Internet Explorer Bug

There were few HTML elements prior to HTML 4 and CSS that supported border and padding, so there wasn’t a clear definition of the width and height of elements. The HTML width attribute defined the table’s width, including its border, while the table cell defined padding. The Internet Explorer bug refers to how earlier versions of Internet Explorer incorrectly displayed the box model or sizing of elements on a web page.

According to Lie and Bos (1996) regarding CSS 1 specifications, “when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterwards.” However, in earlier versions of Internet Explorer, content, padding, and borders were incorrectly interpreted, resulting in narrower and shorter box renders than that of the standard box (Silver, 2006).

Markus Mielke (2006) explains that there have been a variety of options developed to force Internet Explorer 5 and earlier version to display Web pages with the W3C box model. He describes the “box model hack,” developed by Tantek Ҫelik, as one of the best known work arounds. It involves a width declaration specification for Internet Explorer, which is overridden by another declaration that works with CSS compatible browsers. However, Mielke also explains that these hacks get complicated with Internet Explorer 7 and later versions as undesired results are displayed.

 

Table Layout vs. Div Layout

Bijker describes the role of contingent and constraint “as a way to begin to understand the dual nature of technology as at once constant and changing” (Haas, 222), although this may not be exactly true because it would then mean that technologies are unusable. Therefore, Bijker accounts for “technology’s constant yet changing nature” (Haas, 222), by referring to contingency as the people agency and constraints as their limitations on what they can do. This theory of humans and their capabilities of learning new technology can be applied to web design as the two main reasons that determine users’ preferences to either implement a table layout or a div layout using CSS (including the box model) are ease of use and maintainability.

According to Geir Wavik (2009), developers find it easier learning how to design a table layout rather than designing a div layout with CSS since it doesn’t require an external style sheet. However, once a user understands how to design div layouts, the benefits outweigh the difficulty of learning it. Compared to tables, Wavik explains that div layouts are created within one element only, rather than multiple tags nested within a parent element. This gives div layouts more design flexibility.

When it comes to maintainability, div layouts are easier to keep organized. Wavik points out that it is hard to distinguish between content and code with table layouts as it contains multiple tags, which requires several lines of code. He explains that this makes it difficult for any future developers to look through the code and understand the design structure. He also mentions how the excess code leads to delays in development, and sometimes developers become confused with their own code during the process. When adding even the smallest of design changes to a website using the table layout, every page would have to be modified; however, since designs with div layouts are separate from the content, changes only need to be made to one document for the entire website (Porta, 2009). There also tends to be less code for div layouts, according to Wavik, making it easier to maintain and faster to develop.

 

Conclusion

The concept of the box model isn’t hard to understand, but rather how to create it as a div layout is, which is why many developers prefer to use a table layout. Despite the table layout running more bugs than a div layout, as it consists of a longer code, most people find it easier to learn how to create a table layout. Even though they could bypass the bugs in a div layout, developers would have to first learn how to do that, as well as learning CSS. It is this learning curve that relates to Bijker’s theory of contingency and constraint, or the people agency and the limitations people face, which determines their decision on whether to use a table layout or div layout for a website.

 

References

“CSS Developer Guide,” (Last updated 2014). Retrieved from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS.

Last updated 2015, November. “Internet Explorer box model bug”. Retrieved from https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug .

Child, D. (2004, July 09). “The Box Model for Beginners”. Retrieved from https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/ .

Haas, Christina. (1999). On the relationship between old and new technologies. Computers & Composition, 16, pp. 209-228.

Lie, H.W. & Bos, B. (1999). “Chapter 20: The CSS Saga”. Retrieved from http://www.w3.org/Style/LieBos2e/history/Overview.html .

Lie, H.W. & Bos, B. (Revised 2008, April). “Cascading Style Sheets, level 1”. Retrieved from http://www.w3.org/TR/CSS1/#formatting-model .

Mielke, M. ( Last updated 2006, September). “Cascading Style Sheet Compatibility in Internet Explorer 7”. Retrieved from https://msdn.microsoft.com/en-us/library/bb250496.aspx .

Pearce, Jai. “Features of CSS”. Retrieved from http://ictjaicss.weebly.com/p2---css-box-model.html .

Porta, M. (2009, January 30). “Comparison: CSS vs. Table-Based Layouts”. Retrieved from http://www.successdesigns.net/articles/entry/comparison-css-vs.-table-based-layouts .

Silver, L. (Last updated 2006, September). “CSS Enhancements in Internet Explorer 6”. Retrieved from https://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3 .

Wavik, G. (2009, April 08). “Table Layouts vs. Div Layouts: From Hell to… Hell?”. Retrieved from http://www.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/ .

 

Created by Zoey Thao