Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

[Ask SM: CSS] Equal Spacing, CSS Font Replacement

This is our fourth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can distribute the horizontal space between elements evenly, how you can achieve maximum sides on images; you’ll also learn best practices for CSS font replacement and answers to a couple of quickfire questions. If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods:

  1. Send an email to ask [at] smashingmagazine [dot] com with your question.
  2. Post your question in our forum.
  3. Or, if you have a quick question, just tweet us @smashingmag1 or @chriscoyier2.

Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

Distributing the horizontal space between elements evenly Link

Antoine Nicolas writes:

Do you know how to perfectly and dynamically distribute objects horizontally in a container using CSS?

Hi Antoine, this is a classic example of something that is fairly difficult to do in CSS but probably shouldn’t be. I have approached this problem in a number of different ways in the past3. I have revisited it a little now, and I’ll present what I believe is the best solution here.

equal distance

Let’s review the specific goals:

  • The left-most object is left-aligned with its parent element.
  • The right-most object is right-aligned with its parent element.
  • All objects are equidistant from each other at all times.
  • The objects will stop short of overlapping each other as the browser window narrows (ideally).
  • The objects will not wrap down as the browser window narrows (ideally).
  • The technique will work in a fluid-width environment, even one that is centered.

The theory is that the first object will be left-aligned, and the rest of the objects will be right-aligned inside equal-sized boxes that take up the rest of the space. Here is an illustration of what I mean:


The HTML markup:

name="code"><div id="row">
	<img src="images/shape-red.png">
	<div id="movers-row">
		<div><img src="images/shape-green.png"></div>
		<div><img src="images/shape-yellow.png"></div>
		<div><img src="images/shape-blue.png"></div>

The CSS:

name="code">#row {
    min-width: 480px;

#movers-row {
	margin: -120px 0 0 120px;

#movers-row div {
	width: 33.3%;
	float: left;
	min-width: 120px;

#movers-row div img {
	float: right;

And here is a live demo.

Maximum Sides on Images Link

max side

J.J. Sylvia IV writes:

Is there a way to determine the dimensions of an image being displayed and change the <img width=”” /> setting based on the overall width? Sometimes I have images with a really large height, and I need them to be displayed with a much smaller width than other images.

I talked with J.J. a little more about this to clarify the problem. The problem actually relates to height: you have a lot of images, and all of them have different dimensions. You could set a max-width to make sure they keep their ratio and all get squeezed to the right width, but that leaves “jagged” heights. In other words, when you control only the width, you get the benefit of maintaining the image ratio, but you cannot control the height and may end up with very tall images screwing up your layout.

So how do you control both the height and width while maintaining ratio? We will need to lean on some JavaScript because we have to perform some calculations. As I happen to be a jQuery guy, we’ll use that. jQuery is a good choice here anyway, though, because we need to target every single image on the page and do stuff do it, and jQuery makes that very easy and rips through the job.

The best route is to turn this into a plug-in, which will make it a very easy call, as well as allow it to be chained and all that good stuff. We’ll call it “maxSide”. It looks at each element it calls on and figures out which dimension is larger. If it’s the width, it sets the width to the “maxSide” (with the pixel setting passed in). If it’s the height, it sets the height to the “maxSide”.

Here is the plug-in:

name="code">(function($) {

   $.fn.maxSide = function(settings) {

   // if no paramaters supplied...
   settings = $.extend({
      maxSide: 100
   }, settings);

   return this.each(function() {

      var maximum = settings.maxSide;
      var thing = $(this);
      var thewidth = thing.width();
      var theheight = thing.height();

      if (thewidth >= theheight) {
         if (thewidth >= maximum) {
               width: maximum

      if (theheight >= thewidth) {
         if (theheight >= maximum) {
               height: maximum




Since we intend to call this plug-in with images, we need to make sure all of the images have loaded first. So, instead of calling it when the DOM is ready, like you see in most jQuery, we need to call it once the window has loaded.

name="code">$(window).bind("load", function() {
	$("img").maxSide({ maxSide: "100" });

This may cause some unsightly flashes of large images… C’est la vie. If it’s really really awful, you may wish to hide the images with CSS and only reveal them (with jQuery) after the plug-in has run.

Here is a live example4 of this plug-in at work.

CSS Font Replacement Link

@juliuskoroll5 writes:

I would like to hear font replacement via CSS explained by you guys.

Hi Julius, you got it! We all know we can include images on pages just by including an image tag like this: <img src=”…” alt=”…” />. That image can be anything. It can be a logo, a picture of a nice cup of tea, a puppy or even a line of text in a custom font acting as a header. If we want to have headers with nice custom fonts on our website, one option available to us is to just insert them in the page with <img .. /> tags. While this solution has no visual penalty, it has problems. The proper HTML tag to use for headers is the header tag (e.g. <h1>, <h2>, etc). This is best for accessibility as well as SEO (search engine optimization).

You may also be aware that CSS allows us to place background images on elements. This is what gives us the power to have the best of both worlds. We can use a proper header tag, but also use an image. The problem now is that the text within the header tag is sitting right on top of the image. We need to somehow hide the text so that only the image is visible. As it turns out, there are quite a few different ways to do this, and each comes with its own theory. I once did some reasearch on this subject and came up with Nine Techniques for CSS Image Replacement6.

font replacement

The most popular method, in my experience, is known as the Phark method. While it may not be the absolute best method, it works and is very easy to understand.


name="code"><h1 class="replace">
	Smashing Magazine


name="code">h1.replace {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;

Quickfire Questions! Link

Here are a few questions I wrote down from random sources. Like most Web design questions, they could be answered with a book. But instead, I’ll answer them with a single sentence (or two) and a link!

1) Is there a way to make drop-down menus without JavaScript for IE 6?

Yes, there is, perhaps most famously done by Stu Nicholls of CSSplay, with his ULTIMATE CSS only drop-down menu7.

2) Is there a way to get PNG transparency without JavaScript or HTC solution in IE 6?

To clarify, this means alpha transparency. Regular ol’ transparency (think GIFs) works fine with PNGs without any hacks, even in IE 6. Most PNG hacks do indeed use JavaScript or HTC. The root of these techniques is to apply a proprietary CSS “filter” called “AlphaImageLoader” through the “behavior” attribute in CSS. Some of these fixes are incredibly easy to implement, but if you want to avoid them all together, it is a little-known fact that Fireworks can save PNG-8’s with alpha transparency.

3) Is there a way to remove the “Click to activate this control” message for some versions of IE with Flash content?

Yep, inserting Flash objects on your page with SWFObject8 clears up this issue.

4) Is there a way to have alternate sidebars in WordPress?

Sure, if you have a special page template that you want to display a different sidebar other than your regular one, you can do that. The default WordPress function that calls the sidebar looks like this:

<?php get_sidebar(); ?>

It may look like a magical WordPress function, and I suppose it is, but all it does is grab the sidebar.php file from your theme and plop it in. That’s it. So, instead, duplicate that sidebar.php file, call it something like sidebar-alternate.php and call it from your special page template like this:

<?php include (TEMPLATEPATH . '/sidebar-alternate.php'); ?>

That does about the same exact thing. You can use that same bit of code to include any file from your theme folder.

5) Can you style “alt” tags using CSS?

The “alt” attribute for elements is only ever displayed if (for whatever reason) the element to which it is applied cannot be rendered. This is most common for <img .. /> elements, but also for <area> elements and optionally for inputs (because they can sometimes be images). So, the only reason you’d ever see “alt text” is when an image link is broken or you are browsing the Web intentionally without images (e.g. using accessibility software).

The answer is yes, you can style “alt” text CSS. Simply apply text styling CSS attributes to whatever element it is. I think this is a rather clever idea actually. Images are very eye-catching on Web pages, so when an image is unavailable, why not replace it with very descriptive and eye-catching text.

It seems a little weird, but:

name="code">img {
   color: red;
   font: italic 200% Georgia, Serif;

This will sure make that “alt” text pop!


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

↑ Back to top Tweet itShare on Facebook


I create websites and help others create better websites through writing and speaking. I consider myself a lucky man for getting to work in such a fun and rewarding field.

  1. 1

    Wow nice article. May try some of this :)

  2. 2

    Hmm, not bad, not bad. Thanks.

  3. 3

    Nice Post !! May be I also came up with some questions and answers too.

    DKumar M.

  4. 4

    Very useful information, just in time for me. Thanks!

  5. 5

    There’s actually another way to call alternate sidebars (or headers and footers) in WP. Name your new sidebar sidebar-new.php and then you can call it with <?php get_sidebar(‘new’); ?> ;)

  6. 6

    Very helpful! :) Keep’em coming

  7. 7

    great post! thanks. Good that you guys came back soon! :)

  8. 8

    Probably the worst way to distribute horizontal space between elements evenly.

  9. 9

    Thank God IE8 supports CSS Tables, soon many of the hacks we use today will be a piece of cake :)

  10. 10

    Very useful information, also clear answers!

  11. 11

    You say famously, but CSSplay’s drop down menu’s are notoriously poorly implemented, using loads of conditional hacks all over the place instead of CSS to get them to work. I wouldn’t have given that as an acceptable solution to the original question, personally.

  12. 12

    Already applied some of this CSS tricks on some of my projects. the main clue is to understand the box model representation including margin, padding and border and to keep/distribute everything under 100%. do the calculation first then design.

  13. 13

    the negative text-indent is perfect for my current projects usability issues.

  14. 14

    I too would love to see an article on “font replacement” but wasn’t the reply to that more about “image replacement”. I would have thought font replacement would refer to replacing a font while still keeping the text as real text.

    What are your thoughts on Sifr, and other alternatives for font replacement? only touches on it. Would love to see an in depth smashing styled article on font replacement. I personally find sifr to be a bit of a nightmare. I won’t be using anything liek it until there’s a bulletproof, easily scalable font repalcement.

  15. 15

    wow, nice article, i like it, thanks sm

  16. 16

    CSS Font Replacement: what about SEO?
    is this a bad seach engine ranking tecnique?
    I have read (I can’t remember where) that is a DO NOT DO for gaining a good ranking position in search engines. Am I wrong?

  17. 17

    WP lets you use multiple sidebar with the get_sidebar function since v2.5:

  18. 18

    To still utilize seo on font replacement you can add span tag with a display none with copy describing the image inside the header tag in your html if that makes any sense. You can google it. It isnt the most proper way to do it but it works.

  19. 19

    I think the SEO should be fine because the text is still there, it is just moved out of the window, but if it is in the code SEO will pick it up still.

    If you use an img tag instead of plain text and CSS then you will get the issue you are presenting here. Also for image you always have the alt attribute I guess, but the CSS approach is best.

    To be honest with you I personally hate CSS font replacement or anything that have embedded text. But that’s a personal preference, I like to be able to select any text present on a website if I do need to copy/paste anything.

    Top of that pure text is best for accessibility tools :)

  20. 20

    Five Minute Argument

    March 23, 2009 5:37 am

    The “alt” attribute for elements is only ever displayed if (for whatever reason) the element to which it is applied cannot be rendered.

    Apart from – surprise, surprise – Internet Explorer, which has a bug whereby alt text is displayed as a tooltip (behaviour that should be reserved for the title attribute).


↑ Back to top