thoughts

[CSS] Frequently Asked Questions

2005-08-10 modified: 2005-08-22

There are a lot of CSS related questions that keep coming back everywhere. I will list a lot of them in this article. Please do not hesitate to come up with other usefull FAQ-stuff in the comment section below, but please do not ask every CSS related question here, there are forums throughout the web that can assist you in those.

This article currently contains the following issues:

Two stretching columns (also: clearing of floats)
How do I make a fixed footer / header / sidebar?
Numurous IE render problems
How do I make nice menu's?
Centering blocks

Two stretching columns (also: clearing of floats)

Suppose you want to make a layout with two (or more) columns. Each of them might contain a lot of content and you are unable to predict which is largest. Stil you want a surrounding container to enlarge to contain them both. How to handle that?

Say you have come up with the following markup (trivial attributes omitted):

<body>
  <div id="block">
    <div id="news">
      <h1>News</h1>
      <!-- lots of <p> and stuff -->
    </div>
    <div id="article">
      <h1>Article</h1>
      <!-- lots of <p> and stuff -->
    </div>
  </div>
</body>

The easiest way to do this is to float both containers to the left. The main problem with this is that the surrounding block collapses because both containers are taken out of the flow. The solution is described by Anne van Kesteren and comes down to the following:

div#block {
  overflow: auto;
}

This will also handle lots of other problems where floating objects pop up outside their container.

How do I make a fixed footer / header / sidebar?

Again, Anne van Kesteren has done this, so I only send you to his page containing 12 (!) frequently asked designs.

Note that these al rely on the position: fixed; CSS rule. This rule does not work in Internet Explorer <= 6 (will work in IE7), so for IE this is done by absolute positioning and putting the browser in quirks mode. The latter result in the use of the border-box boxmodel (if you are not familiar with this, please use google), so beware of the consequences.

Also see Steve Pugh's test 57. For footers that are either at the bottom of the screen or pushed lower, depending on the length of the content.

Numurous IE render problems

Lots of render problems in Internet Explorer are solved by setting the internal hasLayout property of an element. I quote:

Consequences of an element having, or not having “layout” can include:

Many common IE float bugs.

Boxes themselves treating basic properties differently.

Margin collapsing between a container and its descendants.

Various problems with the construction of lists.

Differences in the positioning of background images.

Differences between browsers when using scripting.

On having layout

Lots of these problems are solved by setting one of the following:

position: absolute

float: left|right

display: inline-block

width: any value

height: any value

zoom: any value (MSDN)

writing-mode: tb-rl (MSDN)

On having layout

For the full story, please see On having layout.

How do I make nice menu's?

There's a wonderful article on a list apart about styleing semantically correct menu structures (a nested list that is). Because Internet Explorer <= version 6 does not understand the :hover on elements other than <a>, you have to use a little javascript for this. This will probably be fixed in IE7.

With some CSS tweaking lots of different looks kan be made (for instance setting display: block on the first level of li's produces a vertical list.

Ow and do not forget putting it in a <map> element please.

Centering blocks

Horizontal centering

Of course we all know the <center> element is deprecated and <table> solutions are to be avoided. Fortunately there is an easy method for horizontal centering hidden in the specs.

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

CSS 2.1 spec: 10.3.3 Block-level, non-replaced elements in normal flow

thus:

[an arbitrary selector] {
  margin: <length> auto <length>;
}

will do

Note that this trick does not work in Internet Explorer 5.5 and lower. If you are concerned about this (do not, unless there's very, very much at stake), there's a workaround. IE 5.5 falsly applies the text-align property to block boxes, so:

body {
  text-align: center;
}
div#container {
  width: <length>;
  text-align: left;
}

will center div#container for IE 5.5. A combination of both wil make it work for all.

Vertical centering

Absolute positioning of your box at 50% is halfway to the solution, you might have come up with that idea yourself. The problem is that this aligns the top corner of your box at 50%. To solve this, add a negative margin-top and set it's value to half the (total) height of your box:

[an arbitrary selector] {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

Note that your box will still be centered when your viewport becomes smaller than the box itself, so parts fall off screen.

It is expected that other CSS FAQ related things will be added to this article in the near future. If you believe it lacks certain issues, please address them in the comment section below and I will look into it.

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).