Writing on full-stack design & development.

One of the more popular posts on this site is my explanation of the easyclear method of clearing floats. I had been using it for a while when I wrote the post, and it's a great solution. However, Dave Woods commented on that post with a new method: setting overflow:autoon the containing element actually has the same effect as the clearfix, without all the extra stuff.

I have a lot of articles "in the pipes," but I've been finding it hard to get into the rhythm of writing again, so I thought I'd start with an easy post to get the juices flowing. This sort of post is obviously something plenty of people have done before, but I usually find them interesting. Since it's been done before, I thought I would concentrate on some of the smaller things that make my life better/easier, instead of the normal operating system (OS X Leopard)/text editor (Coda) writeup.

It's been a very busy summer. Between buying a house , moving into said house, getting married , vacationing , and somehow managing to work, I haven't had any time for the website. But I'm finally caught up with (most) everything, so I thought it was time to get back to the blog.

Today, April 9th, is Naked Day . It's an annual event in which sites remove all of their style information, to reveal the naked page structure underneath. This is my first year participating, but I think it's a great idea.

I'm very excited to announce that CSS Off is back from a brief hiatus. Clevelander Brad Dielman has come on board to lend his expertise to the project, and Clevelander (and Brad) Brad Colbow is our guest designer. I've seen the comp already, and it's going to be a challenge.

I know, I know. What this world really needs is a new rounded corners solution. With CSS3 support right around the corner (ha, right), why bother, right? Well, this solution offers something new to the world of rounded corners. What it does is this: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. See below:

Recently, I was writing a Javascript app that involved some animated, expanding boxes. While doing this, I realized I needed a way to dynamically convert pixels to computed ems. The function wasn't too complicated, and so I decided to make a bookmarklet out of it that did the same thing. It was kind of fun. Hopefully you'll find it useful, either in javascript, or to remove the headache when you're trying to create pixel-perfect designs using ems

So most everyone I know in the community is a Twitter user, but I've managed to avoid it up to this point. However, seeing as I have absolutely nothing to do today, I joined Twitter . I'm hoping it will give me a chance to say things that are too inconsequential for a full-on blog post, but that I still want people to hear. Up till now, I was using Sprokets ' campfire room for that purpose. I'll probably keep doing that, but, you know, Twitter is cool, too.

Aside from browser bugs, float clearing can be one of the most frustrating aspects of CSS development. It takes a little bit of patience and thought to set up your floats and clears in a way that facilitates both your design and the flexibility required in a modern website.

UPDATE

Read http://danott.dev/thoughts/2009/01/06/clear-your-floats-even-easier/ for an even easier way of dealing with floating elements.

For years, I've always formatted my CSS in what I like to think of as the "traditional" manner. Each selector on one line, and each property indented one tab underneath. But when I started working with Sprokets , the other front-end developer there was using one-line css declarations. This threw me for a loop for a while, but I slowly started liking it better and better.