Snook.ca

6 Keys to Understanding Modern CSS-based Layouts

Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

These are the six things that will help people get over the hump.

Box Model

At the very core of it, is an understanding of the box model within CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Suddenly things that look good in one browser go all to hell in the other. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. It's also a good idea to know how to hack it up for older browsers.

Floated Columns

While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly.

Sizing Using Ems

There are two different issues at play here when it comes to sizing with ems: fonts and layouts.

With fonts, Internet Explorer 6 and lower don't allow you to resize the text when specified using pixels (px). Those with vision issues may wish to set their font size larger in order to more readily read what you've written. Specifying your font sizes using ems has proven to be the popular approach to this problem. The importance of sizing text using ems is waning as users move on to better browsers.

Sizing layouts with ems can also offer up a whole other avenue of flexibility. When playing with text size, it can often throw an entire design out of whack. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design.

Image Replacement

Boring text elements dont' excite us. We want to use lots of graphical flair along with gradients and glass effects. And we want to use custom fonts; fonts that browsers just can't offer us yet. Image replacement techniques allow us to replace the existing content-rich and SEO-friendly text with stylish images or Flash files with embedded fonts.

Floated Navigation

If you've mastered floating columns, the other tricky piece to the puzzle and one that is heavily used, is floated navigation. The web-standards-lovin' folk love their unordered lists of navigation and there are a myriad of ways to style them up.

Sprites

Like video games of yore, packing multiple images into one single image has become a popular technique to solve a couple problems. The first is CSS-based rollovers. More recently, it's been proven to be advantageous to combine multiple images — in particular background images used in image replacement techniques — into a single file. This reduces the number of requests your browser has to make, improving the time required to download all files from your server.

Great article Jonathan, as usual. The thing that I think causes the most problems to newcomers is cascade. I've seen folks use the most elaborate hacks and load of !important nonsense to circumvent such an easy principle. It's not that they don't get it, its just that they don't know about how cascade works.

A great set of links, but I agree with Miha that you're missing what I think is the most crucial concept necessary to "get over the hump", and that's cascading/inheritance. (OK, maybe the box model is more important.)

I mean, it's called Cascading Style Sheets, and yet how many stylesheets have you seen where the author has created an endless number of class specifications, each of which sets the same font-family, font-size, etc., each delegating to it's own small set of elements.

I think most CSS "dabblers" don't understand the power of the various types of selectors (or they're still afraid of sketchy browser implementation), and they don't understand how to utilize cascading. Those are the things necessary to get over the hump.

I've never seen (nor thought of) anyone doing their rollover images in the way mentioned. A technique I used to address the issue is to put the "hover image" as the background of the containing list item, and then the "off image" on the a. Upon a:hover, background:none.

Seems like it would be a pain to setup every button like that, especially if they have unique text. Good post.

Great article, and yes alot of great resources in there. This is the great thing about programming, is finding more efficient ways to do things that your currently doing in a less then optimal fashion.

Sprites, takes me back to the Commodore 64 days and full screen scrollers. :)

Great article. I totally agree there is a "hump" in the learning curve right before it all comes together in peoples minds. I like that you mentioned DOCTYPE as well. People can avoid a lot of confusion and achieve consistent behavior if those are understood.

I have a tip that's more geared towards effective layout. It's a mash up of Jason Santa Maria's gray boxes wireframe approach and traditional newspaper column layouts, but I basically made a fluid layout with a transparent PNG grid overlay. It knocks out the links when viewing, but during production, it's okay.

Warning not suitable for IE viewers. :-) Best for FF. (It's just production stuff!)

Go ahead change the size of the window and watch the scaling of columns and elements:

One technique I myself employ each and every time, is the global whitespace reset..

Simply put, start off your stylesheet at the very top, like this;

* {margin: 0; padding: 0; border: 0;}

The asterisk (*) is a universal selector, ie. affecting every single element throughout your (x)HTML.
What it really does is zeroing out differences between browsers, and keeping everything in check.
Of course, you'll have to apply margin, padding and borders yourself, to elements that'd otherwise have these properties set by default, eg. paragraphs, lists and especially the body tag itself (opera applies padding, IE margin).

Get used to this method, and you'll quickly become a master of the grid, not a slave ;)

<h3>When a (Microsoft) Problem Comes Along, You must ZOOM it!</h3>
Many, many coded designs ago, I too discovered the virtues of 'overflow: auto' with regard to clearing floats. Of course, setting width or height is often not a very good way to get IE6-and-below to clear the float, especially when the element in question has padding. Luckily, though, Microsoft has given us an out by providing conditional comments. Now, I just have an IE6-and-below style sheet with a few tweaks in it.

The best part of this scheme is that I can use the MS-proprietary CSS property 'zoom' in the IE style sheet. 'zoom: 100%' bestows 'hasLayout' on any element to which it is applied, which fixes a whole subset of rendering issues in one fell swoop. Parent elements expand to clear floated children; floated anchor elements containing images set to 'display: block' don't get all wonky; list items using background-image bullets don't flake out; dogs and cats, living togeth- well, you get the idea.

I'm sure there are edge cases where 'overflow: auto' and/or 'zoom: 100%' aren't suitable. I just haven't found one yet, after coding dozens of designs.

Floats take a little getting used to, but I wouldn't do it any other way now that I've gotten through learning it. I'm also a big fan of the sprites and image replacement techniques. Again, a bit tricky to get used to, but once you do... look out.

I'd have to agree with most of the people on here about conditional statements, I don't think they're as vital as the six categories mentioned here but with CSS3 getting closer and closer who knows what things will have to be kept away from IE to keep things sane.

They definitely are a major help already.
Great article, I've mined it for whatever I can learn.

I could not agree more with the â€œcascadeâ€ issue. It is the main bottleneck to rookies. I will have to add to that the semantic meaning to markup and CSS. It is hard for beginners to grasp the value of semantic meaning to code. Same applies to server side code and even in SQL statements.

It's a good sensation...
I mean: this is my (and many other's) normal way to act and think.
Well, not in all points but most of them.
For months - no - years! - many people keep on thinking 'bout a different web.
What once was weired, today is normal!
Yes, I have a good feelings about that! :D

Great roundup of CSS goodness. I just got stymied from a custom component I had written for a customer. Turns out that my doctype had been stripped out and replaced with a doctype that rendered my code in quirksmode. Truly evil.

Clearfix is what I use for handling floats. Its by far the easiest and best cross browser approach to handling the clearing of floats I have seen. I know many people will use various "overflow" properties to pull off the clear, and that is great so additional classes (i.e; class="clearfix") doesn't have to get amended to various containing divs, but I have found using the overflow approach can have its cross browser pitfalls.