CSS layout tutorial: the basics

CSS layouts are always recommended to keep presentation and structure separated. However, CSS layouts are not easy to understand for people who come from a table-based approach. Recently I found an interesting article (of some years ago) that gives a detailed overview of the most common problems encountered during the development process of a CSS-based layout. Here is an excerpt:

To fully understand CSS layout, you must not only be aware of it's benefits, but you must also be ready for some problems it presents. Most of these problems stem out from CSS's immaturity. Yes, the recommendation itself has been around for a while, but CSS layouts are only recently possible, and even more recently taken seriously by developers. Expect this immaturity to result in problems, such as:

• Layout limitations: The fact is that CSS layout will not currently allow you to do everything you can do with tables. This can be a real frustration, and has stopped many people from exploring what CSS can do. (I'll show you in this article that CSS can do quite a bit.)
• Slight differences in browser display: CSS is difficult for browser makers to implement, and the W3C recommendations can be vague and confusing. So you can expect even the most recent browsers to behave differently when dealing with some aspects of CSS layout. Keep your layout simple enough and you will likely get a nearly identical display in Opera 5+, NS6, and IE5+. But as your layout increases in complexity, the odds that different browsers will render pages differently also increases.
• Difficulty in switching from tables to CSS: For designers and developers accustomed to wrangling tables, using CSS for layout can be a confusing change. There is a "table mentality" that we developers have taken on over the years, and we are in large part unaware that it exists. Some take offense when this is pointed out, complaining instead that CSS is just difficult and non-intuitive. But if you were accustomed to driving a car with a steering wheel and you were then asked to head out on the freeway in a car steered with foot pedals, you certainly wouldn't be offended at the suggestion you had a "steering wheel mentality." The fact is, we are generally comfortable with tables. CSS layout is different, but we must not confuse differences with increased complexity.

So then, with all these problems, why use CSS? You'll have to make this decision yourself. Many people I know use CSS layouts for personal web projects, but still resort to tables when working on commercial sites. The time is coming when CSS will be suitable and preferred for all site layout, but many reasonably argue that the time has not yet arrived.

I use CSS because I believe in the fundamental principle of the separation of structure and presentation, and I am willing to put up with the problems CSS presents as I look forward to a time when CSS is as robust and simple to implement as tables are today. That time will come, and the web will be a better place for it.

This article was written several years ago and many difficulties listed above have been leveled by new browser generations. However, the slight differences in browser display still exist and affect the following areas:

1. form elements display
2. table rendering
3. default font size
4. default line height

You should always be aware of these discrepancies while developing a layout with CSS. Here's a brief analysis.

Form elements display

Form elements are not covered by the CSS specifications. This means that browsers are allowed to use their default algorithms to render form elements. More specifically, affected elements include:

1. input
2. select
3. textarea
4. fieldset
5. legend

On each of these five elements, browsers mainly use their default rules specified in their internal style sheet. However, you can do the following:

• always set a font size and family on input and select to get consistent dimensioning:

  input, select {
   font: 1em Arial, sans-serif;
  }
  

• always set overflow: auto on the textarea element to control the appearing of scrollbars:

  textarea {
   display: block;
   overflow: auto;
  }
  

• always reset the default indentation of the legend element within fieldset:

  legend {
   display: block;
   margin: 0;
   padding: 0;
  }
  

  Then you can use another element within legend to wrap your text.

Table rendering

To speed up the rendering of your tables and get consistent layout results, do the following:

• use table-layout: fixed, if possible
• always specify a tbody element within your tables
• if you use background images on the caption element, make sure that this element has been turned into a block-level element with full width
• break long lines and links within your table cells to avoid any possible overflow problem

Default font size

To get consistent results with the default font size of your pages, use one of the following CSS font size constants on the body element:

Font size constants

Constant	Equals to
62.5%	10px
76%	12px

Default line height

Eric Meyer has found out that browsers use a different default line height. To mitigate this problem, use the following:

body {
 line-height: 1;
}