zomigi.com » CSS http://zomigi.com The professional blog of Zoe Mickley Gillenwater Wed, 28 Jul 2010 21:36:40 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 CSS Summit 2010 slides and resources http://zomigi.com/blog/css-summit-2010/ http://zomigi.com/blog/css-summit-2010/#comments Wed, 28 Jul 2010 17:30:42 +0000 Zoe Gillenwater http://zomigi.com/?p=384 I just finished speaking at the CSS Summit online conference. Well, technically, I’m writing this before I spoke, so that the post can be up as soon as my talk is done. Sneaky, huh? Anyway, my presentation was titled “Effective & Efficient Design with CSS3,” an extension of the talk I gave at ConvergeSE.

If you’d like to check out the slides, here they are:

Effective & Efficient Design with CSS3 (PDF, 1.7 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query site I showed during my presentation will eventually be hosted. For now, check out the CSS used on the site to see a wide variety of CSS3 techniques in use.

]]> http://zomigi.com/blog/css-summit-2010/feed/ 4 The CSS Summit is near http://zomigi.com/blog/the-css-summit-is-near/ http://zomigi.com/blog/the-css-summit-is-near/#comments Fri, 23 Jul 2010 20:53:03 +0000 Zoe Gillenwater http://zomigi.com/?p=379 Only a few days left until the 2nd annual CSS Summit online conference on July 28. I’m excited about the lineup, which includes:

  • My great friend Stephanie (Sullivan) Rewis speaking about great tools to make CSS3 development easier and how to make many CSS3 effects work in a wider variety of browsers and devices.
  • Nicole Sullivan explaining how she optimized Facebook’s massive CSS file. (I’m so curious to hear about this!)
  • Estelle Weyl teaching how to develop CSS3 and HTML5 for iPhones, iPads, and Android devices. (It’s awesome how many new techniques you can use.)

Plus five more sessions (including my own on ways to improve efficiency and usability with CSS3). Want to “attend”? I have a couple options for you.

One, you can still buy a ticket for $179, plus get 10% off by using discount code CSSGILLENWATER when you sign up.

Two, you can win a ticket! To enter the contest, tweet “I want to go to the #CSSsummit on July 28. Follow @zomigi and retweet to win. Learn more at http://bit.ly/csZgT9.” Do this by this Sunday morning at 8 am Eastern US time. I’ll pick the winner immediately afterward and notify him or her through Twitter (which is why I need you to follow me).

]]> http://zomigi.com/blog/the-css-summit-is-near/feed/ 1 ConvergeSE 2010 and upcoming conferences http://zomigi.com/blog/convergese-2010-and-upcoming-conferences/ http://zomigi.com/blog/convergese-2010-and-upcoming-conferences/#comments Thu, 08 Jul 2010 16:39:12 +0000 Zoe Gillenwater http://zomigi.com/?p=369 On June 26 I spoke at ConvergeSE in Columbia, SC. It was a small conference, but had some really wonderful speakers. Unfortunately, I was sick with a bad cold, so I missed a few talks and didn’t get to hang out with everyone afterward. But the talks I did hear were quite inspiring. I just love going to presentations that get you all excited about the work that you do. Go to the ConvergeSE site to view speakers’ slides and, eventually, video of the actual presentations.

My presentation was titled “Improving Efficiency and Usability with CSS3.” I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too). Many CSS3 techniques can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads and iPhones). I talked about which pieces of CSS3 you can add to your web sites right now and how they might benefit your projects in tangible ways.

If you’d like to check out the slides, here they are:

Improving Efficiency and Usability with CSS3 (PDF, 1.4 mb)

Here are just a few links to related resources that I couldn’t put in the slides but which you might find useful:

I’ll be giving an expanded version of this presentation at both the 2nd Annual CSS Summit online conference on July 28 and at Web Directions USA in Atlanta on September 24.

Registration for the CSS Summit is only $149, but you can get 10% off by using the discount code CSSGILLENWATER when you sign up.

]]> http://zomigi.com/blog/convergese-2010-and-upcoming-conferences/feed/ 5 Announcing my new book, Stunning CSS3 http://zomigi.com/blog/announcing-my-new-book-stunning-css3/ http://zomigi.com/blog/announcing-my-new-book-stunning-css3/#comments Wed, 05 May 2010 13:35:57 +0000 Zoe Gillenwater http://zomigi.com/?p=360 I’ve already written a book and been pregnant, and in some ways they’re very similar experiences. (Besides the fact that they both take 9 months. Seriously, it seems like every web design author I know took about 9 months to write his or her book. Weird, huh?) You get yourself into the situation on purpose, but somewhere through you ask yourself why you’re putting yourself through so much misery. But you’re excited, and you deal with all of the discomfort and stress, and at the end there’s this awesome creation you have to show for all your work. And you say, that was great, really glad I did that, don’t want to do it again any time soon. But as time goes by you forget, and you tell yourself it wasn’t so bad, and you start thinking you want to do it again.

So, I’m not pregnant again, but I am working on my second book. And I’m not even miserable! It’s called Stunning CSS3: A Project-based Guide to the Latest in CSS. “Project-based” means each chapter is its own little standalone project, where I guide you step by step through creating a web component or page with cool but practical CSS3 techniques. (Kind of like Bulletproof Web Design or Handcrafted CSS.) It should be available some time this fall. It’s being published by Peachpit/New Riders, the same people who did my book Flexible Web Design. I had a great experience working with them and they put out great books, so I’m happy to be working with them again.

If you want a reminder about the book when it’s released, sign up on the book’s web site at www.stunningcss3.com. I won’t spam you, I promise. That web site will also be the place where example files, bonus materials, and the like are housed once they’re available. In the meantime, you can go there to learn a bit more about what the book will cover.

Of course, I had to add lots of CSS3 effects to the Stunning CSS3 site. Plus, it’s written in HTML5, and the layout is flexible too (elastic, to be precise). Go view source and enjoy. It’s not going to look the same in every browser, but if you see something that you think is just plain wrong or broken, shoot me a note and let me know.

]]> http://zomigi.com/blog/announcing-my-new-book-stunning-css3/feed/ 6 Deal-breaker problems with CSS3 multi-columns http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/#comments Fri, 02 Apr 2010 15:36:48 +0000 Zoe Gillenwater http://zomigi.com/?p=328 I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. Sure, use them in experimental sites, and maybe even in mainstream sites in small doses with very particular types of content. But for most content, I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.

Balancing column heights

The first problem is how the browser should handle one or more extra lines of content if the amount of content cannot fill up each column equally. In my opinion, the extra content should come at the bottom of the first columns, so that columns further to the right are never longer than columns further to the left. This is pretty standard practice in print design, and having it any other way just looks really strange. At least to me. Take a look and you decide:

The last column has one extra list item and line than the previous columns.

Doesn't this look weird?

Another example of the last column being longest.

You can check out the first demo page yourself. Resize the window and see how each browser handles column number, placement, and height.

It seems like the column-fill property is supposed to address this problem, but I may be misunderstanding what it’s supposed to do. In any case, my testing has shown that no browser supports it, even with browser-specific prefixes. So, we’re left with these unbalanced, awkward looking columns.

In some cases, I understand why the browser is making later columns taller than earlier ones. For instance, there’s a bottom margin on one of paragraphs that happens to fall at the end of one of the columns, leaving a gap and making that column shorter than the following column. I know there are cases when this behavior is desirable and necessary given the content. But we ought to be able to control it, and we can’t right now, and the default browser decisions about how to fill look weird to me in many cases.

Flowing margin and padding across columns

The second problem is how the browser should handle margin and padding on elements inside the columns. Webkit will let margin and padding be split in between columns; even when it doesn’t split a bottom margin, it will often let the entire margin show up at the top of a column. This can result in some extremely ugly and bizarre stuff:

Safari and Chrome break margin and padding between columns.

Check out the second demo page with extra margin and padding added.

Firefox, on the other hand, expands the height of the column area to accommodate the padding, and let’s margin escape out the bottom (margin collapsing at work, I guess) rather than letting it show up at the top of a column.


Firefox makes the bottom margins on the last items in the columns just disappear, instead of splitting those margins across columns or allowing them to show at the top of a column.

Again, the spec doesn’t seem to say anything about which implementation is correct (does it?), but in my opinion, the way Webkit handles it just has to be wrong. Margin and padding are never ever split, are they? And even if they are split in other non-column CSS layout scenarios, it certainly doesn’t make sense to do it in columns. Again, it breaks with print design conventions; while I know web design does not have to emulate print, there are certain typographic conventions that we’ve preserved on the web for readability’s sake, and breaking them would make most people say it looked “wrong.” I think this is one of those cases, and in my opinion, it’s the biggest deal-breaker for using columns right now. Or at least, using them in Webkit-based browsers.

Again, if there are fringe cases where it makes the most sense to split the margin and/or padding, by all means let’s do it. But we need a CSS property to control that, and it doesn’t look like there is one in the spec now. So for now, I hope Webkit changes how they handle this to match up with Firefox’s more intuitive choice, and that the W3C clarifies this in the spec.

Breaking content across columns

Finally, the third problem is that neither Firefox nor Webkit seem to support the column break properties. For instance, adding break-inside: avoid-column; to the li elements should keep the content in each list item from breaking across columns. Unfortunately, it doesn’t work right now.

The text "Start sociis natoque end" is all one list item, but both Webkit and Firefox break content within the list items.

The third demo page is the same as the first one, but it has the break-inside properties added. As you can see, it behaves the same as the first demo.

Controlling breaking isn’t necessarily a big deal with a simple series of paragraphs, but it becomes more important on lists with brief list items, as shown in the image above, and when you have headings mixed in the text, as you definitely want to make sure that headings stay with their following text. Not having support for the breaking properties can really impede usability and limits the usefulness of multi-columns.

Next steps? Workarounds?

Given these problems, multi-column layout isn’t very useful to me right now. Honestly, it’s always been something that I’ve thought should be used only sparingly, in very particular cases. But with these problems, I’m not going to use it in any cases. I’m really hoping that the spec continues to evolve and that browsers continue to update their implementation of these features. (I’m mainly looking at you, Webkit.)

In the meantime, if anyone has any workarounds for these problems, I’d love to hear them!

]]> http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/feed/ 36 70+ essential resources for creating liquid and elastic layouts http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/ http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/#comments Mon, 25 Jan 2010 20:05:57 +0000 Zoe Gillenwater http://zomigi.com/?p=270 I often get asked for my recommendations of resources to learn how to create liquid/fluid and elastic layouts. My first answer is, of course, my own book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. Hey, is it so bad to be proud of your work? It’s the only book out there entirely devoted to designing and building flexible web sites, and the dozens of layout techniques it covers can also be applied to fixed-width design. But I’ll shut up about my book now; if you’re not the book-buying type, here are over 70 online resources to get you started creating attractive and robust flexible web pages.

Design inspiration

It’s always helpful to look at existing liquid and elastic sites to get inspiration for how to design your own. I’ve pulled together several sources of flexible design inspiration in a couple former blog posts on my site:

Templates

Even if you don’t read my book, you can download the example and exercise files from the book’s companion site. They essentially give you several liquid and elastic layout templates or starter pages that you can use to build your own liquid and elastic sites.

Here are some other layout templates:

Here are some frameworks and grid systems that allow you to make liquid and/or elastic layouts:

Articles

Here are some general articles on the what and why of flexible layouts:

Understanding min-width and max-width is essential to working with flexible layouts:

Understanding line lengths is also essential. Although popular belief is that there’s a narrow band of line lengths that are ideal for everyone’s reading comfort, the (limited) research that’s been done on on-screen reading suggests that there is a much larger range of effective line lengths, and that there is a difference between preference and efficacy. Age, disability, reading level, native language, leading, and other factors can all impact which line lengths are most effective for specific individuals in specific situations. See these articles for details:

Tutorials

Here are tutorials on creating multiple-column liquid and elastic layouts:

Creating successful flexible pages is about more than just the layout; you have to make sure the content inside the layout can be flexible too. Here are tutorials on making content, backgrounds, and other effects work with flexible layouts:

This should keep you busy for a while, no? I hope this will be the start of some lovely liquid and elastic designs for you, folks! Drop me a line if you have one you want to show off; I love seeing other people’s great work.

Digg this article if you enjoyed it. Thanks!

]]> http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/feed/ 19 Roundup of Font Embedding and Replacement Techniques http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/ http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/#comments Thu, 17 Sep 2009 14:58:17 +0000 Zoe Gillenwater http://zomigi.com/?p=242 This post was last updated February 2010

Although @font-face, the CSS method for embedding and using any font in a web page, now enjoys rather good browser support, it still has some limitations that keep people from using it. Chief among these is the fact that the license of most fonts, even free ones, do not allow re-distribution over the web using @font-face. Because of this, a number of services and technologies are springing up that provide alternate ways to get non-standard fonts into your pages. I was unable to find any place that listed all of the major @font-face alternatives, so I decided to do my own roundup to provide the basic info on each.

This roundup of alternatives is not meant to discourage the use of @font-face. In the spirit of progressive enhancement, I wholeheartedly think it’s ready to use (with the right fonts, of course). But, in case you are unable or unwilling to use a pure @font-face solution, or you’re just curious what your other options are, here’s are the most popular services and techniques out there for you right now.

Note: This a rapidly evolving area of web design. These solutions are going to change and more are going to be added. I will try to keep this page updated as things change, but if any of the changes are so big that it makes the most sense to just create a new page, I’ll do that instead. Either way, I’ll post a note here indicating where the latest updates are.

Font Embedding Services

These services all make use of @font-face, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal.

Typekit

Status

Open to all.

Method

Subscription to a font library from multiple foundries by month or year. JavaScript used to connect your site with remote font library. You customize CSS to work with the selectors and tags you need, as well as create a font stack to be used as a fallback if @font-face is not supported, but the CSS is in the JavaScript, not your own sheet. sIFR and Cufón will also be used as fallbacks.

Pricing

Freemium. Free “Trial” account gives access to smallest number of fonts and can be used on one web site. “Personal” account for $24.99/year, “Portfolio” account for $49.99/year, and “Corporate” account for $49.99/month increase limits on fonts, bandwidth, and number of sites.

More Info

Fontdeck

Status

In development. Sign up on home page to get details when they become available.

Method

Supposedly similar to Typekit’s, but details unknown. Font library will be from multiple foundries.

Pricing

Unknown.

Kernest

Status

Open to all.

Method

A la carte font selection from multiple foundries. Select fonts you want to use and paste generated CSS into your style sheet. No JavaScript involved.

Pricing

Pay yearly subscription for each font individually, per domain. Many fonts free.

More Info

Typotheque

Status

Open to all.

Method

Fonts come only from the Typotheque foundry. Select fonts you want to use and paste generated CSS into your style sheet. No JavaScript involved.

Pricing

Pay one-time fee for each font individually. Buying installable print version of font for full-price (including access to web version) or web-only version for 20% of full font price. Extra charges for bandwidth over 500 MB.

More Info

Font Replacement Techniques

These techniques do not make use of @font-face, but instead use scripting and/or Flash to display fonts that are not on the user’s system. All of these techniques are free and open to all to use. None of them directly address the licensing issue, but none of them link directly to ready-to-use fonts, so copyright legality is not clear-cut.

sIFR (Scalable Inman Flash Replacement)

Embed your font in a Flash SWF file. JavaScript converts chosen text on the page to Flash text, which can be selected and resized. Some styling handled in CSS and some in JavaScript. Rather difficult to set up.

More Info

Cufón

Convert your font to a proprietary JavaScript format and link to it and the main Cufón script. Specify CSS normally. Uses the HTML5 canvas element or VML to draw text. Contrary to popular belief, text selection is possible, you just can’t see the selection.

More Info

typeface.js

Same idea as Cufón, but somewhat lower performance and quality. Convert your font to a proprietary JavaScript format and link to it and the main typeface.js JavaScript library. Specify CSS normally. Uses the HTML5 canvas element or VML to draw text.

TypeSelect is based on an older version of typeface.js, but now that typeface.js supports text selection, it seems to be redundant.

More Info

FLIR (Facelift Image Replacement)

Uses PHP and JavaScript on a regular font file that you upload to your web server to dynamically generate images.

More Info

PIR (PHP Image Replacement)

Uses PHP and jQuery on a regular font file that you upload to your web server to dynamically generate images.

FontJazz

Convert your font to an image containing each character in a specific size and color. A generated JavaScript for the font displays the appropriate character for each word.

More Resources

There are a ton of general articles and web sites out there about @font-face, font embedding services, font replacement methods, the politics of web fonts, and more. Here are just a few that I think are particularly helpful.

]]> http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/feed/ 28 Me at The CSS Summit online conference http://zomigi.com/blog/css-summit/ http://zomigi.com/blog/css-summit/#comments Sat, 18 Jul 2009 19:30:35 +0000 Zoe Gillenwater http://zomigi.com/?p=216 I just gave my talk Designing CSS Layouts for the Flexible Web from my own little basement office for The CSS Summit online conference. Yes, yes, I’ve given this presentation before, but of course I had to do a little bit of updating and improving, especially because this is the first time I gave it online instead of with a live audience. So, here are the new and improved slides for your downloading pleasure:

Designing CSS Layouts for the Flexible Web (PDF, 5.5 mb)

Yes, it’s a big file—there are a lot of graphics in the PowerPoint. But I didn’t want to compress it very much and have all those graphics look distorted, since examining the graphics is the main point of the presentation.

There’s a little CSS in the presentation, but if you want more in-depth tutorials on the techniques alluded to in the presentation, I’ve written up many of them on this blog:

]]> http://zomigi.com/blog/css-summit/feed/ 7 The liquid web site motherload http://zomigi.com/blog/the-liquid-web-site-motherload/ http://zomigi.com/blog/the-liquid-web-site-motherload/#comments Thu, 16 Jul 2009 20:03:13 +0000 Zoe Gillenwater http://zomigi.com/?p=192 I feel like a kid in a candy store. A nerdy kid. Because I’ve hit the liquid web site motherload: Nomensa’s portfolio.

Nomensa is a web agency specializing in accessibility and usability. Their own site is a nice example of a liquid design, and I’ve had it bookmarked for a while, but I finally got a chance to check out the sites in their portfolio. There are dozens and dozens of them, and almost all of them are liquid. (They also have a few elastic ones, and a few fixed-width.) Unfortunately, Nomensa doesn’t provide links to all of their work, but only a select few as case studies. But, you can google the names of the non-case-study clients, and you’ll find that most of these sites are liquid as well.

Now, I grant you, many of the sites are not terribly stylish. But they still are really useful to look at to get ideas for how to handle content and layout in liquid layouts. You could easily use the same techniques they’re using with a bit more spit and polish added.

Here are a few of the most well done liquid sites from Nomensa’s portfolio:

Barcham Online
The header using seven images of tree foliage that expand and contract to fill the available space is very clever and attractive. Also check out the feature boxes on the home page and the thumbnail gallery under Our Trees. It’s notable that this is an e-commerce site, which you don’t often see liquid.
Broads Authority
I’m not in love with the overall look and feel of this site, but I appreciate the unique layout of the home page. The main image on the home page that has a text box below, which moves down as the text in the adjacent columns grows, revealing more of the image above, is very well done.
Preston City Council
Another unique home page layout and neat use of “variable cropping” on the main photo. Be sure to check out the Gallery under Get Involved, as well as all the little feature boxes and things on the inner pages.
Macmillan Cancer Support
This site is notable for the large amount of information that it organizes into liquid rounded corner boxes throughout the site, without everything becoming chaotic and unbalanced at different viewport widths.
Business Startup Community
Again, not a very attractive site, but I’m bookmarking it simply for the treatment of the three tabs on the inner sections of the site.

I’ll be sure to stop by Nomensa’s portfolio periodically to see what new work they are featuring and gather ideas for solving problems in my own work. I should have mentioned in my flexible web design inspiration post that a great place to find liquid and elastic sites is within the portfolios of agencies or designers who themselves have liquid or elastic sites. Nomensa is now on this list for me.

]]> http://zomigi.com/blog/the-liquid-web-site-motherload/feed/ 3 CSS effect: space images out to match text height http://zomigi.com/blog/css-effect-space-images-out-to-match-text-height/ http://zomigi.com/blog/css-effect-space-images-out-to-match-text-height/#comments Tue, 30 Jun 2009 17:15:48 +0000 Zoe Gillenwater http://zomigi.com/?p=158 I’ve been on my soapbox a lot lately, so I decided it was time to step down for a bit and do a nice, non-controversial CSS tutorial. Wouldn’t you agree?

The inspiration for this tutorial came from the “Who we are” page on the Clearleft site. Try resizing the text—only the text, not the whole page—and notice how the photos move farther apart and closer together. They always stay aligned with the names they go with, and the overall height of the photo block never gets too far off the height of the block of text to the left. So, the design always appears balanced.

The images remain the same size but change their spacing as the text size changes.

The images remain the same size but change their spacing as the text size changes.

I love this effect; it’s a very clever way to fill up the entire available space with images without having to actually scale the images. It’s basically another take on what I call sliding composite images. There are an unlimited number of ways to create sliding composite images—background positioning, absolute positioning, margins, etc—but I wanted to share one way to accomplish the particular effect shown on the Clearleft site. Luckily, it’s really quite simple.

Here’s my version of the effect. Try resizing your browser window and text size to see the flowers move farther apart and closer together.

And here’s how I did it…

The markup and images

I start with a definition list for the markup of the list of flowers beside the images. (You could also use an unordered list combined with headings, paragraphs, and/or spans. Use whatever makes the most sense, semantically, for your content.) The definition list is contained in its own div, which follows another div containing a few paragraphs of text. I’ve got them both in a wrapper div to prevent float drop.

<div id="wrapper">
	<div id="description">
		<h1>The amazing five-flowered vine</h1>
		...
	</div>
	<div id="flowers">
		<dl id="flowers-list">
			<dt><img src="images/flower1.png" ... id="flower1">Raspberry Lily</dt>
			<dd>Rare and exotic</dd>
			<dt><img src="images/flower2.png" ... id="flower2">Seaside Daisy</dt>
			<dd>A native of the North Carolina Atlantic coast</dd>
			<dt><img src="images/flower3.png" ... id="flower3">Orange Starflower</dt>
			<dd>Dimunitive but intensely colored and scented</dd>
			<dt><img src="images/flower4.png" ... id="flower4">Lagoon Pansy</dt>
			<dd>The largest of all native pansy breeds</dd>
			<dt><img src="images/flower5.png" ... id="flower5">Sunbeam Peony</dt>
			<dd>Pleasant to behold but poisonous to ingest</dd>
		</dl>
	</div>
</div>

I’ve used img elements in the HTML for two reasons: that’s how they did it on the Clearleft site, which I’m trying to emulate, and I think my images are content, not decoration, in this case. You could accomplish the same effect using background images, of course, if that made better sense for your particular content.

The CSS

To get the block of descriptive text sitting to the left of the list of flowers, I floated both divs.

#description {
	float: left;
	width: 44%;
	margin-right: 2%;
	}
#flowers {
	float: left;
	width: 53%;
	}

I wanted to create the appearance that my five flowers were all attached to a single stem, so as they changed in distance from each other they would still appear connected. I created an image of a stem with leaves and tiled this up and down the flowers div, 59 pixels away from the left side. I also added a border at the bottom of the flowers div in the same color as the stem to act as grass.

#flowers {
	float: left;
	width: 53%;
	border-bottom: 10px solid #6EAB23;
	background: url(images/stem.png) repeat-y 59px 0;
	}

If I wanted to get fancier, I could have created a background image of grass, applied this to the flowers div, and applied the repeating stem background image to the definition list inside the div instead. But this was just a demo!

I applied a hefty amount of left padding to the flowers definition list to keep its text from overlapping the stem background image, as well as create room for the where I would eventually move the individual flower images. I also zeroed out the default margin on the dl, dt, and dd elements, and added some bottom margin to the dd elements to space the text out and again make room for the flowers.

#flowers-list {
	margin: 0;
	padding-left: 220px;
	}
#flowers dt, #flowers dd {
	margin: 0;
	}
#flowers dd {
	margin-bottom: 1em;
	}

Now it was finally time to move the flowers into place using absolute positioning. I set position: relative on the flowers div so it would act as the point of reference for the individual flowers.

#flowers {
	position: relative;
	float: left;
	width: 53%;
	border-bottom: 10px solid #6EAB23;
	background: url(images/stem.png) repeat-y 59px 0;
	}
#flowers img {
	position: absolute;
	}

Now I just had to direct each flower to how far away from the left side of the div I wanted it to appear. This varied for each flower based on whether I wanted it to appear on the left or ride side of the stem, as well as on the width of the flower image. Here are the values I used.

#flower1, #flower3, #flower4 {
	left: 101px;
	}
#flower2 {
	left: 0;
	}
#flower5 {
	left: 31px;
	}

Because I didn’t change any of the top or bottom values for the flower images, just their left values, each stays aligned with its accompanying name and description along its top edge, no matter how large or small the text size or window size is.

The flowers vary in their spacing along the height of the stem in order to stay with the text.

The flowers vary in their spacing along the height of the stem in order to stay aligned with the text.

Check out the finished demo again and play around with it. The block of text on the left always stays roughly the same height as the list of flowers on the right, so this is a great example of how you can make your web page flexible and still keep the design balanced at different font sizes and window sizes. Here, I’ve used a liquid width on the overall page, as on the Clearleft site, simply because that makes the difference in the spacing of the images more dramatic and easy to see for demo purposes. But you could just as easily use this effect on a fixed-width or elastic wrapper in order to keep images aligned with variable text sizes. You could also use this effect horizontally instead of vertically to fill up the entire width of a div or window with fixed-width images, giving you more leeway to make the overall width flexible.

There’s really no fancy or complicated CSS in use here, but it produces a fun effect that makes your design a lot more adaptable to the myriad of user configurations on the web.

A note about IE 6

I know that there are some problems with my demo page in IE 6—lack of support for alpha-transparent PNGs and float drop at small window sizes due to auto-expansion of divs to fit large content—but they’re not related to the actual effect that this tutorial sets out to teach, so I’ve chosen not to include their fixes in this tutorial. In your own pages using this effect, you may never run into these problems—or you may run into more. But the CSS for the effect itself doesn’t require any tweaking for IE 6.

]]> http://zomigi.com/blog/css-effect-space-images-out-to-match-text-height/feed/ 4