Get a free trial // Grow your CSS skills // Land your dream job

Article Archives


Layout Packs

I thought I would take a crack at a couple of common multi-column fluid-width layout styles that are notoriously quirky with CSS.

One way to accomplish a multi-column fluid layout is to set the columns with percentages. For example, floating a left column that is 19% wide and a right column that is 80% wide (keeping it under 100 prevents them from knocking into each other and knocking down). I really dislike doing it this way. It prevents you from …

Q&A v4… now up on Smashing Magazine. I answer questions about equidistant spacing on elements, CSS image/font replacement, "max sides" on images, and a bunch of "quickfire questions".…


IE Fix: Bicubic Scaling for Images

Devthought had a little CSS tip the other day that is definitely worth repeating. It's not new, it's just an important little trick to know.

And here it is:

img { -ms-interpolation-mode: bicubic; }

If you use width or height tags to resize images in your markup, IE will ensure they look incredibly awful unless you use this little snippet. In general, resizing images in the browser isn't recommended, but of course there are always exceptions.


Unique Pages, Unique CSS Files

I received a question the other day from someone who was curious how I handle multiple different page styles and layouts across one site with CSS. It's a very common scenario I think. For example, you have a homepage that is different from your blog post pages that is different from your about page that is different from your contact page.

Here are some considerations:

There should always be one main stylesheet

In all liklihood, there is quite …


So Your Client Has This Idea…

...and you think it's a bad idea

You think it's a bad business move on their part. It's going to cost them a lot of money and you don't think it has a snowballs chance in hell of making any money back.

I mused this (totally hypothetical) situation on Twitter a few days ago, and quite a lot of people had something to say about it. I was actually quite surprised, most people said do the job. My initial feeling …


Image Rollover Borders That Do Not Change Layout

It's a fact of CSS life that the 'border' of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn't already have a border of that exact size, you will cause a layout shift. It's one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. …


jQuery UI Tabs with Next/Previous

Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.

View Demo   Download Files

jQuery UI makes creating tabbed areas very easy, so the framework is based on that. But we …


Generate a Random Number

For the last two book giveaways I did, I promised I would pick a winner totally at random from the comments. There were hundreds of comments, so I wasn't about to write the numbers on little bits of paper and pick them from a hat. I actually have a dice-rolling iPhone app I was going to use, but then I figured what the heck I might as well build a little webpage to do it quick.

View Demo   Download


News: Joomla! Book Winner & New Tuts+ Tutorial

Congratulations to itaniumdesign, the randomly selected winner of the Joomla! Template Design book contest. These last few book giveaways have been fun. Next time I do it I'll try to get more stuff to give away so everyone has a bit better of a chance. Thanks to all for playing!

In other news, I have put together a pretty cool tutorial for net.tuts+ this week: Build an Awesome Popup jQuery Calculator. It's a tutorial complete with written instructions, …


Links of Interest

Links of Interest aren't "back", but I have some cool ones I really wanted to share, I'll probably do this from time to time, but just not on a planned schedule like they were.


Richard had a neat little idea to build a music discovery site based on great lyrics. He coded it up, I designed it. Reload the page, get a new lyric. If you like it, go check it out on iTunes,, or Amazon. It's called …


Remote Linking

Remote Linking is what I call it when a single anchor link has multiple clickable areas in different locations. It can be used for pretty neat effects and requires nothing but CSS.

It's not a brand new idea and in fact I've covered it before, but I thought I'd put together a more 'real-world' example for ya'll.

View Demo   Download Files


How To Ask a Good Question in the Forums

So we have Forums here on CSS-Tricks which are a lovely place to get and give help about web design. Now that I've posted almost 500 posts there, I think I have a pretty good feel for what kind of questions make for a good thread and are the most likely to be helpful. Here are some pointers:

1. Provide a link to a live example

This sometimes isn't possible, but if there is any way you can, please do. …


Simple jQuery Dropdowns

There are lots of dropdown menus already out there. I'm not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features:

  • Cross-browser compatible (even IE 6)
  • Multi-level and retains "trail"
  • Very minimal styling (easy to adapt)
  • Very minimal JavaScript (short bit of jQuery)


View Demo


Joomla Template Design Book Giveaway & Resources

I get asked from time to time to do more stuff about Joomla. Joomla just happens to be one of those things I know very little about. I've never worked with it and I haven't run across the need for it just yet. I tend to reach for WordPress by default because I'm really comfortable with it and I feel like I can do about anything I want to do with it. However, there are some scenarios that I …


Common Sense SEO Checklist

DISCLAIMER: I don't "really" know anything about SEO. What I do know is the folks at Google and other big search engines are just human beings like us who have created and constantly tweak the search algorithms. Their goal is to give us what we want when searching, the best possible websites relevant to what we are searching for.

So let's set aside all the fancy technical stuff and just use some good ol' common sense.

1. Does this page…

Q&A v3

I didn't get anything prepared for today, but my latest installment of "Ask Smashing Magazine" just went out, and it's full of good stuff!

  • Same-page smooth scrolling links
  • Dynamic Width List Images
  • DIVs of Equal Height
  • Aggregating RSS Feeds
  • Dealing with IE 6

Read Article


Script & Style Redesign

UPDATE: Script & Style is closed. David and I just moved on to other things. The New:

The Old:

(I forgot to take a screenshot before I changed it! So, this is the old Photoshop document)

More Reason to Visit

Far more people subscribe to Script & Style than visit it on the web. That's wonderful I think. Script & Style is stream of articles and RSS is the best way to digest that. At the same time, we certainly …


CSS Tables Are Not a Solution

Eric Meyer said today in "Wanted: Layout System":

Turning a bunch of divs or list items or whatever into table-role boxes is no better than just using table markup in the first place, and it’s arguably worse. Using element names other than table and td to create layout tables, and then claiming it’s not using tables for layout, borders on self-deception.

Not to mention doing things that way means you’re doing your layout in a highly source-order-dependent fashion, …


New Poll: What CSS3 Feature Are You MOST Excited About?

The full questions is:

If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about?

It's so tough to decide, since we want it all and we want it now! RSS readers will have to jump over to make a choice, poll is in the sidebar as usual. The choices are:

  • Border Radius
  • Multiple Backgrounds
  • Border Image
  • @font-face
  • Box Shadow
  • Text Shadow
  • RGBa
  • Gradients
  • Animations / Transitions
  • Other

Moving Boxes

We've been down the jQuery "sliders" path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider.

Many of the concepts presented in those tutorials are the same with this slider, so I'm not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!

View Demo   Download Files



Poll Results: CSS Frameworks

How about that for a cool animated GIF chart graphic eh? I'll have to post how I got that to work sometime.

Well the results are in and it's a landslide. Over 50% of you said "I don't use CSS frameworks". This time I happen to be with the majority. I don't hate them or anything. If you use a framework and it speeds up your development time and you get good results, more power to you.

In second, 18%


.net / Practical Web Design magazine article

I have an article in the March 2009 (Issue #186) issue of .net magazine, sold as Practical Web Design in the United States. It is actually a two-part article and this is just part one. In this first part, I talk about building a web form with HTML/CSS that anyone can use. Then in the next month, I talk about enhancing the fun and functionality of the form with jQuery.

You'll have to snag the magazine to read the full …


So You Want To Go To Art School

I recently received an email from Ben Sima who had a few questions for me:

I'm a high school junior preparing to go to an art school and study graphic design, and I would like to know about your experiences in the art world in an effort to better prepare myself. I would also like to get some testimonials to convince my parents that opportunities for work do exist in the art world, and that not every artist is starving.…


HTML-Ipsum Updates

Visit Site


  • For the Mac, there is a menu bar application (created with, idea and special layout thanks to Jay Salvat).
  • For Windows, there is a small application as well, that minimizes to your System Tray (thanks to Andrew Turner).
New Features
  • For the Mac, there are links you can reveal to add the snippets to both TextMate (thanks to Mikkel Malmberg) and Coda (thanks to Toby Pitman).
  • For Linux, there is a link to download

Round 2 of Smashing Magazine Q&A

I probably won't announce it every single time here anymore, but I am doing a regular column of Question & Answer over on Smashing Magazine now. The second installment is up, where I answer questions about list bullet colors, rollover buttons, website widths, left-tab navigation, and bringing up a modal box on page load. Most of them have demos!…


The iPhone Springboard in XHTML, CSS and jQuery

This guest article has been written by Marco Kuiper, just another creative design geek that loves xHTML, CSS and jQuery. Marcos home blog can be found on

Last week, I wrote an article on how to create the iPhone Unlock Screen using xHTML, CSS and jQuery. As stated in the article, I would really love to tranfer more of the sleek iPhone design to a webpage. The next obvious step for me, was to create the …


Are My Sites Up PREMIUM

Check out Abe up there hanging out. Abe is pretty stoked about the new Premium Service over on Are My Sites Up, and I am too. I really think any serious freelancer or web design agency should have at least some kind of system in place to be keeping an eye on their sites. These things are your babies, you should be responsible with them!

The new Premium Service has some awesome new features, some of which have just went …


Browser Detection is Bad

And here is why:

It is against the spirit of web standards

The whole reason that web standards exist is so that we don't have to write specific code for specific environments. We should write code that adheres to established standards and software in charge of displaying our code should display it as the standards dictate.

It relies on the browser user-agent string

... which has a hilariously disastrous history and is easily spoofable.

It can hinder devices

Example: you …


Set Font Size Based On Word Count

In my little Quotes on Design project, some of the quotes are longer than others. I thought it might be kind of nifty to beef up the font-size on the shorter quotes and trim down the size for the longer quotes so they all match a bit better in terms of the size they take up on the screen.

Rather than do this with a hard-coded number in each of the quotes, I did it with JavaScript. This allows for …


Smashing Sitemap

I wrote up an article for Smashing Magazine on creating a colorful sitemap with jQuery. It covers all kinds of things, like semantic markup, enhancing with CSS3, building a quick jQuery plugin to avoid repetitive code, and more. Links to the example and the download are over there!

The article is also an introduction to me as a new writer over there. I'm going to be doing Question & Answer articles every few weeks or so. The focus will …


Quick Notes

...and the winner of the Learning jQuery book giveaway is:

Nick from Crealities. I'll be in touch, Nick, to get your mailing address. Thanks to everyone who commented to win. Next time I'll try and get more stuff so everyone has a better chance to win.

Remember you can pick up copy right from Packt if you want to buy it. They offer 10% the cover price getting it from them. Otherwise check out the bookshelf for a link …


Put a Subdomain on a Different Server

Over at Are My Sites Up we have a blog to keep users updated with new features, current issues and stuff like that. If, god forbid, the site were to go down, that blog wouldn't do us a heck of a lot of good in keeping people up to date if it was on the same server.

The solution is to simply keep the blog on a different server. But I didn't want to have the blog feel like some …


Tracking Clicks, Building a Clickmap with PHP and jQuery

This demo and article was originally created by Jay Salvat and can be seen here in French. Thanks Jay! The Plan
  • Record the X and Y coordinates of the mouse cursor when it is clicked on a web page.
  • Save those coordinates to a database
  • When called, display a "clickmap" on top of the web page visually displaying the locations of those clicks.

Because it's a cool proof of concept. Should you use this in production and base …


Save Money on SSL Certificates with SSLmatic

If any of you have built an eCommerce site for a client, you have probably dealt with buying and installing an SSL certificate for the site. While this isn't required, it's kind of stupid not to. I sure as heck wouldn't buy anything from a website needing my credit card without seeing that secure lock in my browser window.

Most hosting companies have some kind of deal worked out with some SSL certificate provider or another. Sometimes they set something …


My Recommended Books: The CSS-Tricks Bookshelf

A few weeks ago I started a little new section of the site for books that I recommend on design and development. I'm calling it the CSS-Tricks bookshelf.

I own and have read (probably more than once) and fully endorse every single one of these books. The links to purchase the books are Amazon affiliate links, so their purchase supports me and this site a bit. Good place to get rid of them Amazon giftcards you got for Christmas …


Using jQuery in Magento

At work we are developing a site for a client using the Magento eCommerce software. This is my first time using it and I'm finding it fairly badass (and it's free!). There is a lot to like about it, which we'll probably talk about another time, but it uses Prototype for a JavaScript library. Now I'm sure Prototype is wonderful and all that, but I don't know a lick of it. I'd rather just use the library I've known to …


Select Cuts Off Options In IE (Fix)

I think the problem is fairly obvious here. If you set a static width on the <select> element and the width of the text in the <option> are wider than that, the text gets cut off in IE 6-8. There is no good pure-CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.


Add Design Quotes to Your Site

There is a much newer and nicer version of the Quotes on Design API now, check out the code over at the dedicated API page.

David Walsh helped me whip together an "api" for Quotes on Design. If you want to add a random design quote to your site, just add this snippet of code:

<blockquote id="qod-quote"> ... loading ... </blockquote> <script src="//" type="text/javascript" charset="utf-8"></script>

View Demo

This will insert a quote on your page, inside the "quote" …


Typographic Grid

This is not a "framework" or anything, I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It is inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.

View DemoDownload Files

font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;

I thought the results were very pleasing. If you have a site heavy on text content, I …


The Last Links of Interest – Other Great Places for Links

I've done 62 Tuesday "Links of Interest" posts over the past 18 months or so. it's been fun and a good way to share links, but I'm letting you know this will be the last one. It's not because I don't like sharing links, it's because me doing it here is just a little redundant to link sharing I do elsewhere and it's starting to feel a bit too much like "filler" content. I look forward to saving myself a …


PHP for Beginners: Building Your First Simple CMS

The Magic of PHP + MySQL

It's safe to say that nearly every website that's up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (WordPress, Drupal, etc.), it doesn't hurt to peek under the hood and get a feel for how these systems work.

To get our feet wet as back-end developers, we'll be creating a simple PHP …


Launch: Are My Sites Up?

Hey folks! Me and Richard have just launched a new site I think many of you will find useful. It's called Are My Sites Up? - I bet you can guess what it does =)

Monitor ALL your sites

The idea is that many of us are responsible for maintaining a number of websites. Business, personal, or otherwise. We simply don't have the time to go visiting every one of them every day, let alone every few minutes. So what …


Thank You (2008 Edition)

Happy New Years Eve everyone! Just taking the opportunity to say thanks to everyone (again) for visiting and being a part of CSS-Tricks. This site has came a long way in one short year, and now is a great time to reflect.


Screencast Launched

I moved to Portland, OR at basically the very first days of 2008. This site alone had me motivated to get my office set up as quickly as I could. I was already armed with …


Links of Interest

Creative Advent Series...

...was pretty cool on Positive Space this year. Twenty-four creatives share their best career advice.


Merb and Rails Merging

David Heinemeier Hansson writes:

It’s christmas, baby, and do we have a present for you. We’re ending the bickering between Merb and Rails with a this bombshell: Merb is being merged into Rails 3!

We all realized that working together for a common good would be much more productive than duplicating things on each side …


Dynamic FAQ Page – A Lesson in Accessibility and Progressive Enhancement

The idea is to make a question & answer style page which is embellished in functionality by JavaScript (jQuery). Each question will be shown in a box with a tag hanging from the bottom of the box. When clicked, the tag will slide out and reveal another box with the answer.

View DemoDownload Files


This is by no means a difficult thing to accomplish, especially with jQuery. But this example is great for considering the implications of …


New Poll: What is your CSS framework of choice?

Just tossed a new poll up. This time covering CSS frameworks, which we have never polled before. Kind of curious to see which of them is the most popular, among the people that actually use them. I've only included six of the ones that seem to me like the most popular, but if I have missed a really big one, let me know soon and I'll add it quick before there are many votes.

Poll is down in the sidebar. …


Ho Ho Ho!

.wishing { you: happy-holidays !important; }

Have a lovely day everyone! It's definitely a white Christmas here in Portland. I plan to do a recap of the year next week and tell everyone just how thankful I am for this site and the community we have.

Sorry for no screencast today, I meant to get to it earlier in the week but it just didn't happen. It should be a fun one though next week. I've had many requests for …


Poll Results: How do you keep track of design inspiration?

As always, fascinating results. I am part of the very smallest segment, in that I use an image-based social bookmarking service, ScrnShots, to keep track of a lot of my design inspiration. I'm not a nut about it though, and I definitely "cruise the galleries" as well.

I was surprised to see Local Bookmarks take the #1 spot. Seems like that could get unwieldy to me, and that local bookmarks sort of lack the annotation ability to deal with …

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed