Floats are a powerful feature of CSS and for the most part are pretty straightforward to use.
However, there are many subtleties about them which can cause people to wonder why, for example, images aren’t correctly positioned.
Usually the quickest solution is to throw a bunch of clear: both CSS rules either onto objects or onto empty divs.
This post goes into some of the details about how floats are implemented and how to use them.
How the various browsers’ float implementations differ will also be discussed, but for the most part the latest versions of the browsers all do a good job of agreeing with how to implement the specifications.
-
-
Animation in web applications can do more than add pizazz to a page, it can give good visual cues to the user as to what is happening.
For example, consider an image carousel, where you have one largish image and smaller ones in the background.
Having images animate to get larger and move into place (in addition to sliding on and off the screen) lets the user confirm the intended image is being shown. -
There are several methods you can use to create odd/even stripes for lists to make them easier to scan. A List Apart had an article about creating stripes, but being over five years old, it understandably doesn’t cover some newer techniques which are available. Then again, the need to support legacy browsers makes the article more relevant than you would think at first.
-
CSS3 has a module which describes Multi-column layout which at first glance seems similar to table layouts. The main difference is contents in a block with multi-column layout will flow into the multiple columns, while content in tables will stay within the original columns.
-
In a previous post about using CSS to style HTML tables, I covered collapsing borders, empty cells, and the
inline-tabledisplay type. In this post I’ll cover headers and footers, captions, and columns, as well as other points which are good to know when using CSS with tables. -
Modern browsers have the ability to display very complex HTML tables when using CSS to style them. While there are people who frown upon using tables for page layout, there’s no better nor no more flexible way to display tabular data than using tables. While this post is not a tutorial on HTML tables, it will describe some of the intricacies of styling them. The techniques shown here target recent versions of Safari, Firefox, Opera, and IE.
The information in this post was derived the specifications for CSS 2.1 and various versions of HTML (HTML 4, XHTML 2, and HTML 5 are similar enough for this discussion).
-
The current version of Mobile Safari on the iPhone and iPod touch allow you to do 3D transformations in CSS. This allows you to give objects perspective and rotation in 3D space, as well as the ability to use transitions and animations.
-
A friend was asking about a Firebug-like plugin for Internet Explorer, and that got me thinking about the importance of being able to see how a particular browser is interpreting one’s CSS. While there are many good tools for developing CSS, there’s nothing better than actually trying things on multiple browsers. Fortunately, at least some developer tools are available for Safari, Firefox, and Internet Explorer.
-
If you’re looking to learn CSS, Eric Meyer on CSS is a great place to start. Eric Meyer has long been considered one of the top CSS gurus on the web and while he’s been known to have strong opinions, he’s also very practical without being dogmatic about the use of CSS. He’s got a deep curiosity of how different browsers implement CSS and every now and then finds something which surprises him; I find the browser blog entries his most interesting.This book is based around ten CSS projects for which you can download the files. You change the project’s file throughout the chapter and can check your work against final versions which are included. This book was popular enough that a follow-on book was released, More Eric Meyer on CSS.
-
My wife brought up a question she was asked about the dotted-line box that shows up around a link when you use the back button to return to a page, like the picture at the right. Is it possible to remove the box? Yes it is, but there are a few things to consider before doing that.
