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.

What do you got?

Of course, there's always more to learn and if you think there's a technique that you think is especially important for the beginner, be sure to add it to the comments.

Published August 08, 2007
Categorized as HTML and CSS
Short URL: http://snook.ca/s/839

Conversation

58 Comments · RSS feed
Jermayn Parker said on August 09, 2007

mmm defiantly some links there worth reading and keep bookmarked for later reference, thanks for that.

Darren said on August 09, 2007

Lots of resources worth checking out thank you. I hadn't even thought about liquid faux columns so a big thank you for that.

Miha Hribar said on August 09, 2007

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.

Lee said on August 09, 2007

You forgot about IE hacks! HTML Comments causing problems in some instances (last character repeat bugs) fixing problems in others (fixing foated images) setting height to 0.001% to stop things disappearing etc.

Also, the issues related to relatively positioned elements in floated containers, ie unclickable items etc.

Love the redesign btw, I haven't checked back here in a while!

Christopher Schmitt said on August 09, 2007

All good points! But sometimes even the basic parts of CSS can be tricky for Web designers. I agree with Miha Hribar on the cascade including specificity is hard for new CSS users to use well.

Montoya said on August 09, 2007

Let's not forget liquid layouts, which are still a bane for most people. I keep a lot of resources at Liquid Designs for anyone who needs help.

Luke Visinoni said on August 09, 2007

How about IE conditionals?

http://www.quirksmode.org/css/condcom.html

Learning about those saved me from having to apply a million hacks to make IE happy within my base css file. Now I can serve IE its own css file if it needs special attention.

Jay Luker said on August 09, 2007

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.

David Brooks said on August 09, 2007

This is a great reference article, thanks for writing it.

One thing that comes to mind is the idea of false columns, that's something that continues to come up when I'm teaching new people about CSS.

George Huff said on August 09, 2007

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.

Carly said on August 09, 2007

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. :)

Ruud Welten said on August 09, 2007

Ah, well, a great article! If only I had found one of these before I was finding all of this out by trial-and-error.

Still, some of these links did provide me with something new to work with!

Someones Ex GF said on August 09, 2007

Article was a bit above my head, but I understood enough of it to learn that I should brush up on my CSS skills!

Joseph Oster said on August 09, 2007

bad link? "Listamatic" goes to http://www.alistapart.com/articles/fauxcolumns/

oral seymour said on August 10, 2007

Thanks. I haven't designed a site in years and now I'm having to relearn all this new css layout. The article provided a lot of help to me....but I still miss tables....

Ta4ka said on August 10, 2007

Very cool stuff

Harry Roberts said on August 10, 2007

Some good links there! Well worth a read, nice artice.

Harry

Jonathan Snook said on August 10, 2007

@Joseph Oster: thanks. Fixed the link to Listamatic.

Shycon said on August 10, 2007

Some good info here for dealing with CSS. Marked for reference. Thanks!

Chris Coyier said on August 10, 2007

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.

Dan said on August 10, 2007

Wow very nicely written :) Going to share this with my readers on P2L, thanks!

john said on August 12, 2007

great resources for css beginners and advanced too. I bookmarked the page ...I know I will need the tips sooner or later. Cheers,

Chris Pallé said on August 12, 2007

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:

http://bfiprotos.blueflameinteractive.com/

Same with wireframes:
http://bfi.blueflameinteractive.com/

-CP

Casper said on August 12, 2007

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 ;)

Cheers

Graham Wheeler said on August 13, 2007

<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.

Andrew Gwozdziewycz said on August 13, 2007

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.

Dan said on August 13, 2007

Forms are teh sux.

HTML forms are the bane of my CSS existence.

ryan leatzaw said on August 13, 2007

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.

Ewan said on August 14, 2007

Nice article, will certainly come in handy.

Zeb said on August 19, 2007

Great read. I've bookmarked this article. Thanks for putting things together.

Jason Kataropoulos said on August 24, 2007

All well put Jonathan.

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.

Carlos Eduardo said on August 27, 2007

Nice article. This is a great list for beginners and experts!

H5N1 said on August 27, 2007

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

Davey Boyd said on September 03, 2007

Thanks for these pointers. Its good to get an overview of doing things the CSS way.

Misty said on September 05, 2007

Great article. Thanks!

Ben Spencer said on September 09, 2007

What an amazing article! I was searching the web for an article like this, and a couple of hours later this one cropped up on my RSS feeds. Crazy luck! Thanks very much Jonathan.

herr_ernst said on September 11, 2007

good article. but in my opinion it's now obsolete to consider quirks mode (nobody uses ie<6 nowadays)

sangesh said on September 14, 2007

Interesting article.

Great list for novice as well as for professionals too

goldfries said on September 14, 2007

I'm glad to see many designers / developers around the world acknowledge the importance of CSS / Web Standards.

It's just sad that in my part of the world, people don't care! :) Well I do, just bought a SitePoint book on CSS and it's great!

I look forward to learn more from you.

btw, are you ever going to STYLIZE the "Add my comment" button? ;) To match it with the site's beauty.

Alfred Fox said on September 17, 2007

Great post. Your list was most comprehensive.

Mike Kider said on September 17, 2007

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.

William said on September 17, 2007

Corners

Bryan said on September 18, 2007

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.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Eric said on September 19, 2007

I'm an aspiring web developer (pretty young too - not even in college yet) and its sites like these that I love to read. Keep it up Snooks.

LA said on November 05, 2007

I also think the Sitepoint book is great.

James said on August 29, 2008

Thanks for sharing this nice reference article. I tried that Liquid Faux Columns technique and it works perfect!

NewYoka said on September 08, 2008

Ya the liquid faux columns worked great for me too!

I dream of a day when there will be solid standards across browsers, I just hope google Chrome doesn't have its own CSS nuances.

Lenen said on September 11, 2008

I agree with both James and NewYoka that the liquid faux colomus article is great. I have been looking for this for a while now and finally found it :)

Gmblrs said on October 27, 2008

Great reference article, thanks for writing it. I love the fast rollovers article. Bookmarked!

Exdizajn said on October 31, 2008

Floated Navigation, there is a bug in ff 2...

Alex @ Webson Design said on November 06, 2008

I am using these techniques in almost every project, especially floated list and sprites/image replacements for navigation... nice list :)

Web Design said on November 12, 2008

Great list, I bookmarked a few that will be really helpful in my work. Thanks.

Computer Parts said on November 25, 2008

Great post! Really informative post. Thanks for sharing with us.

Prengnant Mama said on December 05, 2008

These are great techinques I have been using them for a little bit now. The floated list is a great tool as well as the replacements for navigation, thanks so much for your valued work !

Price V said on December 09, 2008

css examples - www.cssportal.com

Great reference article, thanks

Michael Swaaley said on December 27, 2008

Thanks for the helpful information

fetre deepaak said on February 17, 2009

Outstanding article sir!Bookmarked cheers.

приколист said on February 18, 2011

Я никак не смогла вставить рисунок в коментарий. Вставляю ссылку на рисунок а он не показывает его как рисунок. Что мне делатЬ?
Фотки беру отсюда - images.yandex.ru/yandsearch?text=snook.ca

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.