CSS Notes

Floats are often the cause of confusion when laying out a website. Part of this confusion is due to the fact that many browsers, particularly IE, render them inconsistently (contrary to the belief that Mozilla is the culprit). According to the specification, a floating element does not occupy space. However, it is common to want to wrap the floating elements in a containing box in order to set a background color or a border. Although this works in IE, other browsers require that the floats be handled properly. Hence, the following options are available to achieve this desired behavior.

Float the containing box

A floating element within another block-level floating element will expand the containing block. At this time, I don’t have a good way to explain this observed behavior, but I do know that it works.

Insert a clearing element below the floating content

Floating elements do not occupy space, but they do affect the flow of the first non-floating element. Therefore, it is only necessary to insert an element which clears the float inside of the containing box. That way, the box will not be aware of the fact that it contains floating elements.

Using overflow to wrap the floating content

An alternative to a clearing div is to use the overflow style on the containing box. The only downside is that content outside of the box will be hidden, so it depends on how the content is being used as to whether this is an appropriate solution.

Ah, the mecca of CSS, the vertical center. Either the spec writers just completely forgot about this property or they figured we would be witty enough to figure out how to do it without an unique property. As it turns out, the solution is quite logical. Centering the upper left of a box is just a matter of using %50 for both the top and left properties. Once that is done, the use of negative margins can reposition the center of the box onto this point. The solution is explained and demonstrated in this publication. Note that the first solution presented does work in all browsers.

When text is set to not wrap (or there is a very long string of text without breaks), then the width of that text node may seem hard to capture. Fortunately, thanks to a little Javascript trick, it isn’t to hard to figure out. Basically, you need to temporarily enable overflow scrollbars, capture the scroll width, then restore.

When preformatted text is rendered, the browser tends to honor that request a little too literally. If a line in the preformatted region is excessively wide, then it could mess with the layout of the page. The overflow: auto style can help to keep it under wraps, but then it makes the preformatted text somewhat difficult to read. A better way is to force the preformatted text to wrap when the line length exceeds the width of block in which it is contained.

Credit for this tip goes to Tero Karvinen.

Mozilla tries to be smart about when to show the vertical scrollbar, unlike IE which just grays it out when it is not in use. While I applaud the effort of Mozilla, the problem with this approach is that the content of the page often fluctuates, leading to rendering glitches when the scrollbar toggles on and off. To ensure that the scrollbar always remains visible, you have two options. The first uses a proprietary Gecko style.

This next option is a validating version of the first, if that is important to you.

Since the policy of IE is to always display the vertical scrollbar, it is used on text areas even when it isn’t needed. To have IE only show the vertical scrollbar when it is needed, you apply the following style:

Mozilla uses a dotted border around links when they are activated. While this feature improves accessibility, there are times when it gets in the way, such as when it is drawn around an image in the header that links back to the home page. To disable this border, apply the following style: