Published by Chris Coyier This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear. If you read this blog, there is a 99% chance you've had a hair-pulling experience with IE.
#40: How z-index Works
Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We go from start to finish in this screencast defining what float is, how it works, how and why to clear them, and some browser differences. Links from video: All About Floats Article #42: All About Floats Screencast
What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". Here is an example of that.
Absolute Positioning Inside Relative Positioning A page element with relative positioning gives you the control to absolutely position children elements inside of it. To some, this is obvious. To others, this may be one of those CSS "Ah-ha!" Moments.
10 CSS-Lifesavers For Efficient Web DesignCSS has been hailed and cursed by many web designers and developers around the world. On one hand, it makes our lives easier by separating content from style, which makes the entire process much more organized and easier to deal with. On the other hand, CSS has it's fair share of quarks, misunderstandings, and overall issues that bare some explanation. Today, we will go over 10 CSS lifesavers and tips for a more efficient web design process. 1. Learn how to use z-index properly 10 CSS-Lifesavers For Efficient Web Design
We're already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? In this article, you'll master the 960 grid system by dissecting the 24-column version demo. If you've only used 960gs before for Photoshop mockups, consider this your lucky day. Mastering the 960 Grid System
Driving the 960 Grid System CSS frameworks are unflexible, overbloated and confusing. Whoever said that, never used a CSS framework, or at least the 960 Grid System. I used to think that too, some time ago, but I did use the 960 Grid System to draw my templates.
‘How to design a portfolio site’ screencast Posted on 13 July 2009 • 19 comments A few weeks ago Ryan asked me if I’d like to do a two-part screencast on designing online portfolios, and I thought it’d be a great idea, especially as — at the time — I was just putting the finishing touches to this new site. I also thought it’d be a good way of showing you some of the techniques I used rather than just writing about it on the blog. So, if you’d like to see me rambling on and looking rather red-faced indeed (I blame a combination of a crappy iSight camera, an unbearably hot week, and my wild-man beard), head over to Think Vitamin to check it out: By the way, if there’s anything particular you’d like to ask about the new site (why i did certain things, how I did certain things, etc.) that isn’t covered in the screencasts, please feel free to leave a comment below and I’ll answer as much as I can, either in a reply or a separate blog post.
CSS frameworks are bloated. CSS frameworks are for people who don't know how to code. CSS is too simple to implement a framework. A Detailed Look at the 960 CSS Framework
Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results. Prototyping With The Grid 960 CSS Framework
The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily. However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became overwhelmed at how complicated the whole thing seemed. With all this code, how could this be the easy way to create a layout? This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them. We’ll focus specifically on the 960 Grid System, but after reading this guide, you’ll find that most of the other grid systems out there are similar and will make much more sense after you understand a few basic principles. Grid-Based Design