Building off of the hCard 3D Markup Map and hReview 3D Markup Maps I made earlier (products, movies, restaurants), I created a markup maps for the calendar microformat.
There are two hCalendar microformat examples for which these markups correspond respectively: a sample event and a scheduled meeting.
Ethan Marcotte specializes in making the code that runs some great designs on the Web. While the designs are impressive, his approach to HTML and CSS is inspiring. For me, the code often outshines the design when Ethan is on a project. It’s one of the main reasons why I asked him to co-author Professional CSS and it’s a reason that savvy Airbag industries snatched him up.
Ethan Marcotte is humble, diligent and works hard to excel in his passions. Quite frankly, we’re lucky that he has chosen to be a Web nerd instead of a literary academic.
Christopher Schmitt: What’s your name and what you do?
Ethan Marcotte: My name’s Ethan Marcotte. I work as a UI developer for Airbag Industries, and my blog’s URL, unstoppablerobotninja.com, can beat up your blog’s URL.
CS: How would you describe yourself?
EM: I’m a lover, not a fighter.
CS: The unstoppable robot ninja is a lover, not a fighter?
EM: Everybody could do with a good hug now and again.
CS: You’ve stated, at one point, to owning 98GBs of music. What is the size of your music collection now?
EM: Ninety-eight? Damn…I don’t know as it’s ever gotten quite *that* high. My iTunes library’s currently hovering around 59 gigs, but I suppose the year’s not over yet.
CS: Maybe it’s not 98Bgs, but a metric fuckton. Must have lost a decimal point in the conversion.
EM: If you asked Ryan Sims, he’d tell you that 58 of those gigabytes are They Might Be Giants tracks. I say that Mr. Sims can bite me.
CS: What’s wrong with nerdy alternative rock?
EM: I couldn’t tell you. Your music might be nerdy, but mine is composed solely of Pure Awesome™.
CS:That is still a lot of music. How do you manage that large of a collection? How do you back it up?
EM: I use iTunes for the listenin’ and the organizin’. As for backing things up…yeah. I should probably get on that.
CS: I find it hard to believe that you don’t have a backup process in place for recovering your work. Do you have anything setup for backing up your work?
EM: Well, my non-music files are backed up religiously. At Airbag, we use SVN to back up all of our client work, whether it’s PSDs, static templates, or the source code for a super-awesome application we’re working on. My personal stuff is actually mirrored between my MacBook Pro and my G5 by ChronoSync.
My iTunes library doesn’t fit on my laptop anymore, so it’s exempted from the syncage–hence, it doesn’t really get backed up at all.
Which is, as the kids say, stupid.
CS: What musical artists are you into now?
EM: It sounds pretentious as hell, but I binge on music: I’ll play the hell out of an album when I first get it, then drop it cold and pick up something else. And what I listen to is pretty circumstantial, too. I mean, I’ll put on something melodic when I’m working on comps, but I prefer something a bit more jarring and mechanical when I’m coding.
Anyway. Lately, I’ve been playing quite a bit of Interpol, The Futureheads, Mobius Band, Bloc Party, Magneto, some Art Blakey, and a bit of Tracey Thorn’s new album. And the usual dose of classical music. Oh, and Soul Coughing’s Ruby Vroom. Always Ruby Vroom.
CS: What’s your academic background? Is it related to having four copies of Milton’s Paradise Lost?
EM: No, I’m just addicted to pointlessly long poems.
So yeah, I was a literature major in college. It was fun, in its way: I learned a hell of a lot, especially during my last year at school, but I was a bit ambivalent about pursuing anything beyond that. I figured I’d give myself a few years off, and see if I missed the books enough to enroll in, say, a PhD program.
I’m coming up on year nine of “a few years off,” so I think I’m probably getting by okay. *grin*
CS: Did you start off in Web design after you left college?
EM: Professionally? Yeah, basically. Right after I graduated, I managed to get a random job working for a dotcom outside of New York City. It was more or less the worst place I’ve ever worked at: long hours, horrible management, and bad projects. Still, the company somehow managed to attract some really incredible, talented people; they’re largely responsible for starting my education in working online.
From there, I got a job working for the Boston arm of a Manhattan-based studio. I worked as a lead front-end developer for a small team, and again had the opportunity to work with a small army of insanely bright, funny, talented individuals. Which I suppose is the best thing about this industry: there’s no shortage of rockstars to learn from.
Not to get all Hallmark on you or anything.
CS: Your own story is a path of someone not following their traditional education,or training if you will, and pursuing a different field. Do you find that learning for our industry is better when it’s done online than a traditional college experience?
EM: When I entered the industry, there wasn’t anything in the way of established curricula for web design. The dotcom era changed that, of course, but at the time my only option was learning online. So I can’t really speak with any authority as to which is better: some of the most talented designers I’ve met came from science backgrounds, and some of the best developers I know are trained artists or musicians.
CS: Were there any other jobs you tackled?
EM: After school? No, nothing really outside the industry–I mean, I’ve had some writing gigs, but so far everything’s been tech-related.
CS: What was your first exposure to the Internet/Web?
EM: Well, that’d probably be a high school BBS some student tech wonks set up when I was a sophomore. Dialing in to a FirstClass server to trash your English teacher on a bulletin board wasn’t exactly most compelling first encounter with the wide wonderful internets, but it did the trick. I was hooked.
CS: How did you first get involved with Web design?
EM: I first admitted this to the world onstage during AEA Boston this year, but it involved madrigals.
That’s right, madrigals: the D&D-playing dork of musical genres. I was part of an a cappella madrigal group in college—shut up—, and when they asked for volunteers to build their website, I guess I didn’t step backward quickly enough. So most of my initiation into the realm of web design involved a *cough* not-so-legitimate copy of Photoshop 3, and copying/pasting some other site’s font-und-table markup until I figured out exactly what all those little angle brackets did.
And yes, the site’s still online; no, you can’t have the URL. Trust me on this one.
CS: When did you develop that Web site? What did you do after that first Web site? How did you learn to Web design afterwards?
EM: I launched that site in 1996. Leave your DOCTYPEs at the door.
After that site went live, I did a couple freelancing gigs. Nothing especially sexy, mind, but I learned a lot. Though honestly, I’d say I got most of my education after school: on the job, and by trolling various web-related sites like Surfstation, k10k, and linkdup.
CS: What’s your least favorite CSS bug?
EM: Does “Internet Explorer 6” count?
I’m not sure I can pick just one, honestly. I’d have to say that IE’s “expanding box” model is pretty damned frustrating to deal with–at least, more so than the average rendering bug.
But in general, I have a lot fewer problems with CSS bugs than I used to. Part of that’s knowing where certain “trouble spots” lie in browsers’ CSS implementations, and using alternate methods I try to recommend that folks read up on something Molly Holzschlag called a “surgical correction strategy”. By using conditional comments in conjunction with separate files that apply browser-specific CSS patches, Airbag’s drastically reduced the amount of time it spends debugging.
CS: How do you feel about Web development now than say five years ago? In some ways it’s easier with the release of Internet Explorer 7 for Windows, but what challenges do you currently face in building Web sites?
EM: Well, I don’t think our largest challenges are technical ones. My workflow hasn’t changed significantly in the past couple years, and I think that most of the issues we were once faced with–browser compatibility, workflow questions, perceived shortcomings in CSS–have been overcome by now. If anything, I think we’re all just waiting to see what’s next: CSS3, HTML5, and keeping tabs on stuff like Silverlight and AIR. Which makes the “now” feel like a bit of a transitional period.
That’s not to say that there aren’t battles to be fought right now: we’ve got plenty of people slinging mud from both sides of the validation issue, discussions over what this whole “web design” thing actually entails, and there are still a fair number of companies that are just now learning how to incorporate standards into their work.
Anyway. It’s not a boring time to be working online, by any stretch of the imagination; it just feels like most of the big technical battles have been fought and, for the most part, won.
CS: What are your thoughts on HTML5 and CSS3 specification?
EM: It feels a little early to pass judgment on HTML5, frankly. The spec authors mention that work on the spec will be ongoing for years, possibly a decade or more. So while certain features currently being discussed make this markup junkie a little wary (Client-side database storage? Really?), I’m excited the HTML spec’s being revisited. Can’t wait to see what the end result is.
As for CSS3, let me at it. Can’t wait. Multiple background images? Want it yesterday. Flexible, multi-column layouts? As the kids say, yesplz.
CS: Have you had taken a look at or worked with Adobe AIR? Over at Heatvision we are building our first application with AIR-and it’s been fairly successful where a typical web application wouldn’t work.
EM: My experience has largely been as a consumer. I’ve read quite a bit of the literature, but the most I’ve actually done with AIR has been toying with applications like Pownce’s client and Snitter. So at this point, AIR’s just yet another framework I wish I had more time to tinker with.
CS: What do you think of Microsoft’s Silverlight? Any thoughts in its relation to Adobe Flash? You’re not obligated to use the phrase “Flash Killer” in your answer.
EM: Well, my MacBook Pro doesn’t actually meet the installation requirements, so I’m again on the sidelines with this one. If they can really smooth out some of the cross-platform woes they’ve been having, then Silverlight could really get some traction in the next few years. But right now, it’s too early to tell.
CS: I totally agree with you about companies needing to incorporate standards into their workflow. I feel there’s challenge out there for companies to embrace standards based workflow. Have you seen that in working with other companies or in your brief stint so far with Airbag?
EM: Absolutely, and I think it’s one thing we could definitely improve upon. Working in a client- and deadline-driven industry complicates the matter, to a certain extent; when a client’s worried about ad revenue, industry regulators, or the size of their logo, it’s hard to sell them on the business case for having standards-compliant code stay standards-compliant.
It’s just not a discussion we’re used to having, which is part of the reason I wrote that article for ALA last year. Rather than simply leading with benefits like SEO and accessibility, we need to introduce the benefits of–well, standards early on in the sales pitch. Hopefully we’ll develop the language in time, and our clients will start to ask for it by name. It’s not uncommon to see DOCTYPEs asked for by name in RFPs these days, so maybe we’re not far off.
CS: What’s your set up look like when building a site or template?
EM: All my coding’s done in TextMate, which is the program I’ve liked the best among the other OS X coding applications (despite the horrible, horrible single-character undo). I’ve got a directory called “-default” that has a stock directory/file setup I use for all my projects. So when I’m starting work on a new site, I just need to clone that directory and open up the TextMate project file.
I build everything in Firefox first, then test on Safari/Opera. Assuming everything looks good there, I use VMWare Fusion to check how things are looking in Internet Explorer, your dear friend and mine.
CS: For a while you were running the operation of Vertua Studios. How was being your own boss? What lessons did you learn?
EM: I ran Vertua for about two years, and had a blast doing it. But yeah, it was a bit of a learning experience. In working for myself, the biggest hurdles I had to overcome were my time management skills–or lack thereof. Client deadlines and face-to-face meetings can shape your day only so much; the real trick for me was staying focused when the schedule quieted down. I’d get distracted much less easily if I established little milestones in my day: email for a half hour in the morning, four hours of work, then a half hour lunch, and so on. I think the only way to become better at sticking to a routine is to force yourself to become a slave to one for awhile.
CS: Now you work for Airbag Industries. How was the transition?
EM: Airbag and Vertua merged in April of this year, and it’s been just stellar. There hasn’t really been much of a transition to speak of, as more and more of my work had been coming from Airbag during Vertua’s final year. So when Greg offered to formalize things a bit more, it seemed like a great fit.
And so far, it’s been great: the team is excellent, and we’ve been working on some really killer projects (with some more in the works). I saw joining Airbag as a chance to work with some of my favorite people working online today.
I mean, I’m not a trained designer like Rob, Shaun, or Jason, and definitely not a Photoshop savant like Dan, or Ryan. So as someone who enjoys designing the odd website, working with someone like Greg’s been a stupidly great learning experience. Ryan Irelan is that rare breed of back-end developer: he’s got a deep technical knowledge, but is very good at clearly communicating complex concepts to clients or to stupid UI guys from Boston. And Russ Casenhiser, the newest member of the team, brings a business development/project management acumen to the team that is nothing short of badass.
So yeah, I’d say things are good. I heart this job.
CS: Airbag appears to be a virtual company with all or most of its employees in remote locations. Do you still keep up with the routine or routines you developed while working for yourself at Vertua?
I try to, yeah. The only real difference has been that instead of setting the project timelines myself, I’m working with the rest of the team to establish them. Other than that, the routine’s basically the same: keep a strict schedule in place so that Ethan doesn’t run off to chase something shiny.
CS: Thanks for your time! It’s always a pleasure, Ethan.
(Photo: Brian Warren)
Building off of the hCard 3D Markup Map I made earlier, I created a markup map for the product review microformat.
Building off of the hCard 3D Markup Map I made earlier, I created a markup map for the movie review microformat.
Building off of the hCard 3D Markup Map I made earlier, I created a markup map for the restaurant review microformat.
Again, I used the example from the official Microformats site so Web developers the markup compares with the map. While most examples are fictional, this example seems to be based off the very real Cafe Borrone restaurant.
Knowing what elements are available in the hCard microformat is important when trying to apply CSS rules. The main problem is that there are so many elements it’s easy to get tripped up on how to best style an hCard.
To help understand how many elements are in the hCard and keep the block-level and inline elements separate, I followed Andy Clarke’s 3D Zen Garden map model and made my own 3D map for the hCard microformat.
Update: After asking Tantek to review the hCard map, he made some suggestions for improving it. For more information, see the notes section.
Keep in mind that this example is simply a base. The 3D map uses the live example as its base, however an hCard can add more elements, like instant messenger handlers, or remove some that are currently shown in the demo. It depends on how much information you have to work with. For a clearer demonstration of this, I suggest tinkering with the useful hCard creator.
Also the live example is an hCard geared for an organization. Therefore the fn and org class attribute values are used on the same a element.
In the previous version, I used “web.site” as a fictional Web address. Tantek reminded me that example.com Web address was registered by the IANA for this very reason. I keep Ohio in the map since that’s my new home state.
I fixed a typo in the last version where I carried over the class attribute tel for the email address’s div wrapper.
In my previous example I was representing block level elements in two ways: as being on top of visual boxes as well as being placed inside them as well. While that made perfect sense at 2 a.m., I reworked the presentation of block level elements to be bold and try to focus the boxes on grouping and nesting of elements.
Lastly, I created this example using CSS rules (instead of going with Illustrator). The rationale behind using XHTML+CSS over a graphics editor is that I am more familiar with those technologies. Also I thought it would be a great benefit for Web developers to see a markup map (which could be dynamically generated) while using a tool like hCard generator.
The first step was creating the CSS rules, but I don’t have the spare time to implement the rest of the project myself. Though, maybe someone else can?
When Internet Explorer 7 for Windows (IE7) was released in early October of this year, the browser featured the hard work of many developers and engineers to bring the browser up to par in rendering CSS. Sure, there are some things missing, but overall it’s a solid rendering browser (with it’s fair share of bugs).
Yes, IE7 is the browser we should have had five years ago and because of that Web designers can finally do what they haven’t been able to do for quite a long time: start looking foreword. Namely, at CSS3.
I decided to cull together a short five item resouce list to help designers get on a good path for learning more about CSS3:
“The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.”
There are a few of CSS3 sites I picked out, but what are your favorite CSS3 resouces?
During last weekend’s Train the Trainer workshop, Jinny from University of Georgia asked a question that gave Molly and I pause:
Are attribute selectors case sensitive?
As someone who strives to write correct markup and CSS rules, I always try to make my CSS class and ID attributes match case. At most, I worry about my ID or class selectors have a typo, but worry about attribute selectors? To be honest, it wasn’t till Internet Explorer 7 for Windows (IE7) came out that I’m giving attribute selectors a closer look.
So, on the spot, I dove into writing up a quick test case and run it through the major browsers: IE7, Firefox 2, Safari, and Opera. The results were that all the major browsers are case senstivie except Safari.
However, I wasn’t satsisified with that test case. To be honest, Molly wasn’t either. The first pass earned Molly’s dissastifcation as I didn’t test against XHTML first, but settled for HTML 4. (I quickly tested against XHTML, but the results were still the same: Safari allowed for case insensitivity.)
Now that I’m back home, I decided to write a tighter test case in XHTML and HTML and run it through a few more browsers than I tested at the workshop. These results can be viewed in Table 1.
| Web Browsers | DOCTYPE | |
|---|---|---|
| XHTML | HTML 4 | |
| IE 7 | Yes | Yes |
| Safari 1.2 | No | No |
| Safari 1.3 | No | No |
| Safari 2.0 | No | No |
| Safari 3.0 (iPhone) | No | No |
| Firefox 1.5 | Yes | Yes |
| Firefox 2.0 | Yes | Yes |
| Opera 8.5 | Yes | Yes |
| Opera 9.21 | Yes | Yes |
| Camino 1.0 | Yes | Yes |
Note that links within the table include screenshots of browsers and links to test cases.
Once we find something odd, the first thing to do is to read the specifications to see what is the “right” behavior for the browser to follow.
First up, this is what the CSS 2.1 sepcification says about case sensitivity:
All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes “id” and “class”, of font names, and of URIs lies outside the scope of this specification. — CSS2.1, 4.1.3
And while we are at it, let’s take a look at the HTML specification as well, which states that the title attribute is also case sensitive.
The short version of the results is that Safari is wrong and the other major browsers that support attribute selectors appear to be getting it right. (Yes, that includes IE7.)
How can you, the Web developer always looking for that edge in coding, use this bit of information? The obvious thing to do is to send CSS rules to only Safari browsers.
For example, write a CSS rule like so:
p[title="foobar"] {
border: 1px solid red;
}
And then set up the HTML like so, making sure to change the case of the title attribute’s value:
<p title="FoObAr">The content is styled with a 1-pixel,
red border in Safari.</p>
Thanks to Jinny for asking an intriguing question and to Porter for providing his usual excellent W3C specification translation services.
Like GIFs and JPEGs, PNG images are ideal for web use. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha transparency.
What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Below is an image with layers of varying transparency:
PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs web design, primarily because of the impression that PNGs don’t enjoy wide browser support.
This view on PNGs is a bit of a misconception.
While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.
While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.
Microsoft has a plethora of proprietary visual filters and transitions that are available to IE4+. These filters are designed to apply various multimedia affects (transition wipes, light effects and so on) to images in a web page that are viewed with IE. One of these image filters — AlphaImageLoader — lets you display a PNG with alpha-transparency in IE6.
You can employ this filter within the HTML of your page by creating a div element and embedding into it a bit of CSS:
<div style=”position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/image.png',sizingMethod='scale');”></div>
The key property here is the filter property. While filter is not valid CSS, it does allow you to apply the AlphaImageLoader filter to the image specified in the parentheses. However, since it isn’t standards-compliant, you may wish to apply this property only as needed (i.e., only when the page is being displayed in IE6-).
By combining this method, developers can build rich image-based designs with alpha transparency like they would for modern browsers like Safari, Firefox, and Internet Explorer 7 that all supports PNG alpha alpha transparency natively.
One available method for doing this is employing Angus Turnbull’s .htc script:
.htc script at TwinHelix Designs. HTC is aAlphaImageLoader filter to all images within a web page. .htc script, change the line that references the blank.gif file so that it points to the gif’s location on the server.ie.css), and include within in the following single line, referencing the location of the .htc file:
img {
behavior: url(iepngfix.htc);
}
The behavior property let’s you attach a script to some selector (in this case, all img elements). So, this CSS file attaches the .htc file to all of your images, thus applying the desired filter effect to every image within a web page.
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen"
href="ie.css" />
<![endif]-->
Conditional comments like these are understood by IE. What the comment says is, “if the browser is IE6 or below, then read the lines within the comment tags. Otherwise, ignore them.” Conditional comments provide a convenient way of applying IE-specific HTML or CSS. Here, the ie.css stylesheet loads only if the page is displayed in IE6‑, letting you apply the non-compliant CSS only when it’s absolutely necessary.
While a rather convoluted way to get transparent PNGs working in your web pages (although less convulted than my previous method), it does provide a method that is as standards-compliant as possible, giving you the freedom to include the beauty of semi-transparent layers in your designs.
With my publisher’s permission, I’m sharing the following excerpt from my latest book, CSS Cookbook, Second Edition, which discusses a neat trick for designing multi-column layouts in any order.
You want to develop a system to display content in columns in any order.
Given the following markup:
<div id="container-outer">
<div id="container">
<div id="content" class="column">
<div class="wrap">
[...]
</div>
</div><!-- /END #content -->
<div id="navigation" class="column">
<div class="wrap">
[...]
</div>
</div><!-- /END #navigation -->
<div id="related-info" class="column">
<div class="wrap">
[...]
</div>
</div><!-- /END #related-info -->
</div><!-- /END #container -->
</div><!-- /END #container-outer -->
Apply the following CSS rules:
.column {
float: left;
}
#content {
margin-left: 20%;
width: 60%;
}
#navigation {
margin-left: -80%;
width: 20%;
}
#related-info {
width: 19%;
}
/* IEx patches */
* html .column {
display: inline;
}
* html #navigation li {
height: 1%;
}
/**/
This will yield the basic page layout that you see in Figure 9–18, with two narrow, flexible-width sidebars bounding an equally flexible center column (see Figure 9–18).
From this rather bland foundation, you can layer additional CSS on top of it. Adding the following code to your CSS will yield a design like Figure 9–19:
body {
font: normal 62.5%/1.7 Verdana, Geneva, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
#container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#container {
display: inline-block;
}
/* Hide from MacIE5 */
#container {
display: block;
}
/**/
#container-outer {
background: url("bg-left.gif") repeat-y 20% 0;
}
#container {
background: url("bg-right.gif") repeat-y 80% 0;
}
.column .wrap {
padding: 20px;
}
#content .wrap {
padding: 20px 30px;
}
#content p {
margin-top: 0;
}
#content p:first-child {
font: normal 1.4em/1.6 Georgia, Times, "Times New Roman", serif;
}
#content p:first-child:first-line {
text-transform: uppercase;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
margin-bottom: .4em;
}
#navigation li a {
background: #36C;
color: #FFF;
border-left: 7px solid #09F;
display: block;
padding: .4em .4em .4em 20px;
text-decoration: none;
}
#navigation li a:hover {
border-left: none;
border-right: 7px solid #09F;
padding-left: 27px;
}
#related-info {
color: #555;
font-style: italic;
}
#copyright {
border: 1px solid #B2B2B2;
border-width: 1px 0;
clear: both;
padding: 10px 20px;
text-align: center;
}
#copyright p {
margin: 0;
}
The float model has a storied history. The authors of the CSS specification never intended floats to be used for page-level layout control: rather, they were a means to control the flow of content around an object, much as align="left" or align="right" would cause text to wrap around an img element. But despite the specification’s original spirit, floats do offer us a powerful and flexible alternative to traditional, table-based layout techniques.
Alex Robinson, a designer, published an influential article on creating the “Any Order Columns” in CSS. Robinson’s technique allows developers to create multicolumn layouts easily by using floats to display each column in any order, regardless of the order in which those blocks appear in the markup.
To work with this technique, first you need to establish columns in your markup, like so:
<div id="container">
<div id="content" class="column">
[...]
</div><!-- /END #content -->
<div id="navigation" class="column">
[...]
</div><!-- /END #navigation -->
<div id="related-info" class="column">
[...]
</div><!-- /END #related-info -->
</div><!-- /END #container -->
<div id="copyright">
<p>Copyright notice goes here.</p>
</div>
Inside each div, place any markup you would like. Figure 9–20 shows what the unstyled document looks like, with a few paragraphs and an unordered list thrown in for good measure.
From this demonstration so far, a div element is set up for each of your three columns, and each is assigned an id that describes the kind of content that will be placed inside. In this solution, the values for id are content, navigation, and related-info. It would have been just as easy to use center, left, and right, but that wouldn’t have been especially forward-thinking: what happens when you change your site’s CSS file, and the new design requires the “left” div to appear on the righthand side of the page?
With this simple markup structure in place, you can apply a generic float rule to all three column divs:
.column {
float: left;
}
As you see in Figure 9–21, the layout does not look drastically different. The copyright text is a bit out of alignment, but the bulk of your page appears as it did before with each column div stacking horizontally. Once dimensions are assigned to these blocks, however, things rapidly change.
First, start with the content block. To set the block to be 60% of the window width, and the width of the lefthand sidebar to be 20% of the screen, create the following rule:
#content {
margin-left: 20%;
width: 60%;
}
Figure 9–22 shows that the layout is looking a bit odd, but starting to take shape.
By setting a lefthand margin equal to the width of your lefthand sidebar, you’ve essentially “reserved” some space for it. The next step is to use negative margins to “pull” the navigation div across the content div to the lefthand side of the page:
#navigation {
margin-left: -80%;
width: 20%;
}
The margin-left value applied is a sum of the width of the center column (60%) and its lefthand margin (20%). This pulls the navigation column over to its proper place (see Figure 9–23).
Now, simply by setting a width on the related-info block, the three-column layout is complete, as shown in Figure 9–24:
#related-info {
width: 20%;
}
Looks excellent, although the copyright div is still a bit off. But with the clear property, that’s easily fixed (see Figure 9–25):
#copyright {
clear: both;
}
Although the layout may look as though your columns are nearly complete, Figure 9–26 shows you that Internet Explorer on Windows needs a little extra attention.
Thankfully, this is a documented IE bug known as the “Doubled Float-Margin Bug”: essentially, when a margin is applied to a floated box in the same direction as the float, that margin is doubled in size.
Since a lefthand margin is applied to a left-floated element, IE on Windows takes that 20% margin and doubles it to 40%.
Thankfully, the fix is a simple one. By applying display:inline to the problematic element, Internet Explorer behaves again. To do this, add the following lines to your CSS:
/* IEx patches */
* html .column {
display: inline;
}
/**/
The oddly formatted comments and * html prefix ensure that this code is seen by IE on Windows, and IE on Windows alone. And as Figure 9–27 shows, IE is behaving properly.
So you’ve arrived at last: a flexible, three-column layout template. But where else can you take this?
The space between the columns is called a gutter. To customize this layout by increasing the size of the gutters, an approach would be to apply some margins around the columns. There are a number of ways to achieve this effect, but first start by adding an additional div to each of your columns, like so:
<div id="container">
<div id="content" class="column">
<div class="wrap">
[...]
</div>
</div><!-- /end #content -->
<div id="navigation" class="column">
<div class="wrap">
[...]
</div>
</div><!-- /end #navigation -->
<div id="related-info" class="column">
<div class="wrap">
[...]
</div>
</div><!-- /end #related-info -->
</div><!-- /end #container -->
With your “wrap” divs in place, apply padding to them with CSS to create more breathing room (see Figure 9–28):
.column .wrap {
padding: 20px;
}
#content .wrap {
padding: 20px 30px;
}
As you may have noticed by now, the “Any Order Columns” method is grounded in the intelligent use of margins: positive margins are used to reserve space, while negative margins are used to “pull” columns out of their natural position.
Now simplify the CSS for a moment, and remove all the column margins:
#content {
width: 60%;
}
#navigation {
width: 20%;
}
#related-info {
width: 19%;
}
As a result, your layout now looks like Figure 9–29, with each column appearing in its natural position in the float order.
By adding a lefthand margin to your navigation div, and then by using a negative lefthand margin to move your related-info div, you can essentially reverse the order of the second two columns. With the following CSS, you’re left with a layout like Figure 9–30:
#content {
width: 60%;
}
#navigation {
margin-left: 20%;
width: 20%;
}
#related-info {
margin-left: -39%;
width: 19%;
}
And to complete the demonstration, place the content column on the righthand side of the page, as shown in Figure 9–31.
To do so, apply the following code:
#content {
margin-left: 40%;
width: 60%;
}
#navigation {
margin-left: -100%;
width: 20%;
}
#related-info {
margin-left: -80%;
width: 19%;
}
As with the first layout, you’ve applied a margin to the content column in order to “reserve” some whitespace on the lefthand side of our page. Then, you’ve used negative lefthand margins to pull the navigation and “related information” divs into the proper location.
A simple way to calculate rearranging columns is to follow a somewhat simple algorithm used to calculate the negative margins for a column:
If this technique doesn’t work, there’s always good ol’ trial and error.
Now return to your first layout (see Figure 9–32), and see how you can make your columns feel, well, a bit more polished. The first step? Background images.
“Faux columns” is a technique developed by web designer Dan Cederholm that utilizes a horizontally repeating background image.
By using one tiled image, Cederholm’s method works incredibly well in a fixed-width design: however, the technique’s versatility means that it needs only slight modification to work in our fully flexible layout.
First, you need two images, one for each side of the content column. Figure 9–33 shows the lefthand graphic, while Figure 9–34 shows the right.
Next, you’ll need to wrap your container block in an extra div, like so:
<div id="container-outer">
<div id="container">
[Rest of template goes here]
</div>
</div>
And finally, you’ll need to add the following rules to your style sheet:
#container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#container {
display: inline-block;
}
/**/
#container {
display: block;
}
/**/
/**//*/
#container {
display: inline-block;
}
/**/
#container-outer {
background: url("bg-left.gif") repeat-y 20% 0;
}
#container {
background: url("bg-right.gif") repeat-y 80% 0;
}
With this code in place, the columns appear as full-length columns, like the ones in Figure 9–35.
From here, feel free to add any typographic styles you’d like; the ones supplied in the Solution section of this recipe will do nicely, and will yield the finished design shown in Figure 9–36.
The float model for laying out pages is powerful, but floats can have a rather steep learning curve. As a result, many designers find absolute positioning to be an attractive alternative, enabling them to precisely position the different components of their design with x- and y-coordinates.
Unfortunately, positioned elements are taken “out of the document flow,” which effectively collapses their containing element. As a result, “positioned” designs lack the powerful float concept of clearing, which enables the different parts of your designs to be “context-aware”: that is, a footer div (such as the copyright block in the solution, earlier) can be cleared of the floated blocks above it, but not of any positioned elements on the page.
Shaun Inman, a talented web designer/developer, has written a lean JavaScript function to fix this problem. When inserted into your web pages, Inman’s script will automatically “clear” elements of any other positioned elements on the page (see Figure 9–37).
The only potential drawback to this method is that it does rely on JavaScript being active in the user’s browser. But if your content is accessible if you disable JavaScript in your target browsers during testing, then all should be well.
