One of the layout issues that has for years plagued CSS developers is the concept of clearing floats. There have been numerous articles and comment debates discussing what is the best way to clear your floats.

One method that was proposed back in 2005 was to simply add “overflow: auto” or “overflow: hidden” to the containing element in order to easily clear the floated children.

I think this is, overall, a pretty good way to clear floats. But, as with any CSS workaround, there is a potential drawback if this method is used on a large containing element.

One of the primary challenges that arises when dealing with CSS3 properties is the maintenance of the different proprietary prefixes. At least one solution has been offered to help prevent the so-called “forking” that results.

I think there is another way to help maintain the various repetitive CSS3 properties. What I’m proposing here will prevent you from having to organize your proprietary properties and will solve the problem of having to repeat the same values over and over again.

Some of the maintenance issues that arise can be avoided if you use PHP to generate your CSS, and use PHP’s capabilities to abstract a multiple lines of CSS3 into a single line.

The CSS2.1 spec introduced a new technique allowing developers to combine three CSS properties and a pseudo-element to create auto-incrementing counters — similar to what is displayed in an ordered list.

While counters for lists are limited to <ol> or <ul> elements and only with simple incrementation, the new counter method introduced in CSS2.1 allows for integers to be prepended to any set of elements, and is quite flexible.

This technique is a bit confusing because it uses multiple CSS properties, and looks different than most CSS code. I hope to clarify how it’s used and I’ll run down some possible ways it can be implemented, along with some benefits and drawbacks.

I don’t think I’ve seen this specific method used yet, but it seems like one of those super obvious techniques. This technique is not really anything new, it just combines two concepts that most CSS developers should be fairly well familiar with by now.

CSS sprites are a method for creating complex rollovers without using JavaScript.

CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don’t require JavaScript.

Just to clarify beforehand, this article does not constitute an argument in favour of using multi-line CSS blocks over single-line CSS blocks.

But once in a while I peek at people’s CSS code, or try to follow along with a tutorial discussing some CSS topics, and notice that the CSS isn’t very easy to scan through, and the main problem is often white space, or you could say “breathing room”.

So, I’m going to explain here how I think CSS should be laid out (mostly using examples that incorporate multi-line blocks) for easier readability and scannability.

Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.

The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.

While we might normally associate CSS3 with modern browsers like Safari and Chrome, it should be noted that the CSS3 spec goes back to 2001. So a few properties (like word-wrap) have had support for some time now.

After redesigning this website, and realizing that I’ve been way too nonchalant about different window sizes, I came across an issue that probably occurs in a lot of different layouts.

The problem happens under the following circumstances: (1) The header and footer of the page have no specified width; (2) The content area has a specified width, and is centered using margin: auto; (3) The window is resized below the content area’s width, or the window starts out below the set width of the content area.

In most cases, this issue will go unnoticed, because generally speaking, sites are designed to fit within the 960px standard width, which will be fine for most users. Because my monitor’s resolution is set to higher than 1024×768 (which is small in the web design community nowadays), the problem was occurring on my own site, which has for a while now been designed for a larger than average width.

One of the huge benefits to using CSS3 is the ability to create image-like effects without the use of images. CSS3 gradients, shadows, and rounded corners have helped designers greatly in this area.

While browsing the website of well-known web hosting company Media Temple, I stumbled upon their Labs page and noticed they’re using a block hover effect on the list of items, and the hover state uses (what I assume is) the border-radius property when the background becomes visible.

The other day I came across a useful site called ScriptSrc.net that allows you to get up-to-date script tag links that point to your favourite JavaScript libraries.

The site has a clickable corner ad promo to get people to “spread the word”. I thought using CSS3 there would be a better way to position such a corner advertisement (or promo, or whatever), because the clickable area for the ad on ScriptSrc.net is actually too big. In some cases, you might prefer the clickable area to be bigger, but I think it’s always best to keep the clickable area limited to the actual ad.

At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.

There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.

Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements (for lack of a better term).