Menu Search
Jump to the content X X
Smashing Conf New York

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6

This is our third 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 take care of a smooth page scrolling and Internet Explorer 6 bugs. You’ll also learn how to aggregate RSS Feeds, how to create dynamic width list images and how to create div-containers of equal height.

If you have a question on HTML, CSS or JavaScript, feel free to reach me (Chris Coyier) using one of these methods:

  1. Send your question by email to ask [at] smashingmagazine [dot] com.
  2. Post your question in our forum1
  3. Or, if you have a quick question, just tweet us @smashingmag2 or @chriscoyier3

Please note: I will answer as many questions as I can, but I will certainly not be able to answer them all. I hope that you will use the forums to post questions because that will give you an opportunity to get help from the community as well.

Smooth Page Scrolling Link

@Mango_Juice4 writes:

What is the best JavaScript method for a smooth page scroller?

Hey Mango_Juice, jQuery has the ability to do animated scrolling, using its animate function and the “scrollTop” parameter. Karl Swedberg covers this technique5 on his great website Learning jQuery.

The best way to handle it is to set the scroll targets with hash tag links (e.g. #about) on your page. You set your “href” value in the anchor links to “#target”, and then that link will jump to the page element on that page with “target” as its ID. This means it will work regardless if JavaScript is enabled or not.

For the majority of users, who do have JavaScript enabled, we’ll intercept the clicks on those links and scroll down to them (or up), as needed. Here is the code that makes it happen:

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name='   this.hash.slice(1)  ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

View Demo6 | Download Files

Dynamic Width List Images Link

Giedrius writes:

Is it possible to create a list with CSS that has the text aligned to the right side, but on the left side has an image taking up the width of the remaining space?

Hey Giedrius, when I first read your question, I thought immediately of a recent post on Web Designer Wall, CSS: Menu List Design7. Nick La uses some clever positioning techniques to build a flexible text-based list mimicking standard menu design. You know, the kind that has a little dotted line that connects the text on the left to the price on the right.

But then as we talked, it was clear you needed something different. Because the image has to have a gradient that isn’t horizontally repeatable, we literally need to use an inline image and set its width as needed. CSS alone isn’t capable of performing calculations and effecting DOM elements like that, so let’s enlist jQuery for the job.

First, the completely normal unordered list in HTML:

<ul>
	    <li>Lorem ipsum dolor sit</li>
	    <li>Aliquam</li>
	    <li>Vestibulum auctor dapibus neque</li>
</ul>

The only thing to note is that the length of text in each list item varies significantly. So let’s think through what we need to do:

  • Measure the full width of the list item.
  • Measure the width of the text inside.
  • Append the image to each list item.
  • Set the width of the image to (full width) – (text width).

Here is how I did it with jQuery:

$(function(){
	$("li")
	  .wrapInner("<span></span>")
	  .prepend("<img src='images/listimage.png' />");
	var listWidth = $("li").width();
	$("li span").each(function(){
	      var itemWidth = $(this).width();
	      var imageWidth = listWidth - itemWidth;
	      $(this).parent().find("img").width(imageWidth - 10).height(1);
	});
});

pointy list

View Demo8 | Download Files9

DIVs of Equal Height Link

Adrian Engelbrecht writes:

How is it possible to have two divs, one with the navigation and one with the content, that always have the same height. Is that possible?

Hey Adrian, there are actually a lot of different ways to do this, but everyone would agree that none of them are as easy as they should be with CSS.

equal height columns

1) Fake it with Faux Columns.
If you just need two divs to look like they are the same height, but not necessarily be the same height, this is the easiest method. You can read about Dan Cederholm’s faux-columns method10 here and see a simple example here11.

2) Use Tables or CSS Tables.
Obviously, you know that using tables for layout is bad mojo, but if it gets you out of a tough spot once in a while, the world will forgive you. So rather than using divs, you could bust out table cells to do this, because in the same row they are always the same height. CSS tables are a hot new technique (personally, I still have serious doubts), but they may help as well. Check out this tutorial12 on NETTUTS.

3) Use Absolute Positioning.
If you know one column is going to be taller than the other, you can use absolute positioning to accomplish this task. Simply wrap both of them in a div with position: relative;. Then have your main column grow to however large it needs to be, pushing the wrapper out. Then absolutely position the other column with both top: 0; and bottom: 0;, and a fixed width along one edge. Dan Rubin has more about this technique here13.

4) Use JavaScript.
I generally avoid JavaScript for anything layout-related, but if you aren’t worried about that, you could possibly use JavaScript to set equal heights. JavaScript has the power to measure elements, compare and perform calculations and all that other magic necessary to get the job done. Take a look at this jQuery plug-in14.

Aggregating RSS Feeds and Implementing Them on a Website Link

Kyle Steed writes:

Are there any free services that can take RSS feeds from different locations and combine them into one feed that I can use? Then once combined, is it easy enough to implement on a website and style using CSS?

Hey Kyle, yes, there is such a free service. Whenever I need to work with external RSS feeds and integrate them in a website, I turn to SimplePie15, which is a brilliant and free PHP class for doing just this.

I put together a little demo for you, which smashes together the CSS-Tricks and Smashing Magazine feeds and displays them on a page.

View Demo | Download Files

pointy list

It was pretty easy to do. First I include the SimplePie file on my page and set up the options that I want:

<?php

    //get the simplepie library
    require_once('inc/simplepie.inc');

    //grab the feed
    $feed = new SimplePie();

    $feed->set_feed_url(array(
    	'http://feeds2.feedburner.com/CssTricks',
    	'http://smashingmagazine.com',
    ));

    //enable caching
    $feed->enable_cache(true);

    //provide the caching folder
    $feed->set_cache_location('cache');

    //set the amount of seconds you want to cache the feed
    $feed->set_cache_duration(1800);

    //init the process
    $feed->init();

    //let simplepie handle the content type (atom, RSS...)
    $feed->handle_content_type();

?>

Now you have an object loaded with RSS goodness. This loop will spit out the feeds in order of date:

<?php foreach ($feed->get_items() as $item): ?>

	<div class="chunk">

		<h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>

		<p class="footnote">Source: <a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p>

	</div>

<?php endforeach; ?>

Clearly, you have everything, both the markup and CSS, to fully control all of these elements now. The SimplePie website has some nice tutorials on it (including screencasts). Refer to the API Reference16 to find all the stuff you can get out of the object.

Dealing with IE 6 Link

@chrisjlee17 writes:

Best practice/workflow for designing for IE 6?

Hey Chris, ain’t IE 6 fun? It’s been a hot topic for a long time now, all of this business about how and what to support. jQuery does a fantastic job of abstracting all of the cross-browser pains for JavaScript, but unfortunately we don’t have such magic for CSS.

IE Bugs

The fact is, we still have to deal with IE 6 when we are creating websites intended to cater to as wide an audience as possible. At work, I think every single major client we have uses IE 6 at their desk. Makes me want to cry some days, but that’s just one of the painful parts of our job and we’ve got to live with it.

The more you deal with it, the better you become at avoiding IE 6’s common pitfalls and quickly fixing bugs. Here are some of the most common ones18. To fix them, never use browser hacks. Hacks simply aren’t needed, because you can use conditional comments19 to serve up special styling just for IE.

If you’re not comfortable dropping IE 6 support, Simon Clayson has an elegant workaround:

<!--[if !IE]><!-->
<link rel="stylesheet" href="my_gorgeous_layout.css" type="text/css" media="screen" />
<!-- <![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" href="my_gorgeous_layout.css" type="text/css" media="screen" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" href="textonly.css" type="text/css" media="screen" />
<![endif]-->

This will serve up your regular style sheet to all other modern browsers and serve up a special style sheet, starting from scratch, to IE 6. This special “textonly.css” could contain only very basic text styling so that the website is usable but mostly unstyled.

Help us to improve the “Ask SM”-section! Link

Please feel free to suggest improvements for our “Ask SM”-section. Do you miss something? Would you like to change something? Please let us know in the comments!

(al)

Footnotes Link

  1. 1 http://forum.smashingmagazine.com/viewtopic.php?f=10&t=272
  2. 2 http://twitter.com/smashingmag
  3. 3 http://twitter.com/chriscoyier
  4. 4 http://twitter.com/Mango_Juice
  5. 5 http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
  6. 6 http://css-tricks.com/examples/SmoothPageScroll/
  7. 7 http://www.webdesignerwall.com/tutorials/css-menu-list-design/
  8. 8 http://css-tricks.com/examples/PointyList/
  9. 9 #
  10. 10 http://www.alistapart.com/articles/fauxcolumns/
  11. 11 http://css-tricks.com/examples/SuperSimpleTwoColumn/
  12. 12 http://nettuts.com/videos/screencasts/everything-you-know-is-wrong/
  13. 13 http://24ways.org/2008/absolute-columns
  14. 14 http://www.cssnewbie.com/equalheights-jquery-plugin/
  15. 15 http://simplepie.org/
  16. 16 http://simplepie.org/wiki/reference/start
  17. 17 http://twitter.com/chrisjlee
  18. 18 http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
  19. 19 http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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

    Fantastic, I always struggle wit getting my desigs to work on alternate browsers, though I struggle a lot with Opera to be honest. :)

    0
  2. 2

    cool stuffs, but already seen…

    0
  3. 3

    Opera is the only webbrowser that passes the acid test, so I guess you’re using some things the wrong way…

    0
  4. 4

    Simon Harlinghausen

    February 20, 2009 5:03 am

    Actually we try to get every code validated.
    And don’t care too much about Opera, more
    about IE6.

    0
  5. 5

    You should implement the smooth scrolling in Smashing Magazine. :)

    0
  6. 6

    @joggink, get your eyeballs washed, its not the only browser that passes the tests -_-”

    And using conditional comments @ stylesheets is just wrong. I have yet to find a case where I need to use conditional comments to fix an IE bug.

    0
  7. 7

    I used the equal heights plugin as the basis of implementing faux columns, without the hacks, figure 4% non-javascript I can live with.

    I didn’t like how the equal heights plugin added scrollbars on overflow, so I ended up just using their idea to implement my own solution. One problem I encountered with the javascript solution was the upon resize things went awry, so I came up with my own solution: http://notsurereally.wordpress.com/2009/02/07/jquery-adjusting-div-heights-on-window-resize/. IE8RC1 has a bug with the adjusting upon resize event, apparently it will be fixed in final release (thank god!).

    0
  8. 8

    @joggink, not only opera, but also safari, internet explorer 8, and firefox have passed these tests.

    0
  9. 9

    Another way to solve the “equal heights” problem is to use the “large negative bottom-margin/large positive bottom-padding”-method (I don’t know if it goes by any other name). It’s pure css, works in all browsers and doesn’t require background images.

    0
  10. 10

    @V1: what are your reasons to say, conditional comments for stylesheets is wrong?

    0
  11. 11

    <!–[if no0b]–>
    use conditional comments
    <!–[endif]–>

    Seriously, IE is not that hard

    0
  12. 12

    About your DIVs of equal height – why go through the trouble of comparing heights of elements “and all that other magic necessary” when you can simply set both divs height to the height of their parent via jQuery? Regardless of whether the content in the navigation or the main content grows larger than the other, the parent still contains both and will have a height being pushed by either of those children. Maybe this is all you were getting at, your explanation just made things sound quite convoluted.

    0
  13. 13

    I agree with V1.

    Start with your markup and then do your CSS. I’ve never used an ie6 hack and if I encountered any ‘bugs’, I just rework the markup a bit.

    0
  14. 14

    So – very nice! But some of them is very old stuff. Sorry, but isn´t it right, that CC´s slowing down the site´s performance? For some little Hacks (like a simple star hack) it seems better to use them in one CSS file.

    0
  15. 15

    The smooth scrolling thing is pretty cool, but in Opera when you click on the “top” link in the example, it doesn’t scroll smoothly. It jumps to the top then has some sort of text seizure. Any idea what might be causing that?

    0
  16. 16

    I love that IE bug image!

    0
  17. 17

    you can do equal hight divs by placing both in a parent div and setting all of these ids to floats.

    Also, as for page scrolling MooTools has a very easy to use scrolling feature that uses the John Resig’s (creator of jQuery) transitions.

    As for anything JavaScript related I would suggest MooTools over jQuery. jQuery is exceptionally fast with selectors, but unless if you are using heavy heavy scripting the overhead is marginal. MooTools is more fun.

    0
  18. 18

    @Steve You’d rather rework markup and use an extra hour (at least) of your time messing with the css again than add a min-width: 400px; *width: 400px; or something like that? Kudos to you but my deadlines are too strict to be doing that on anything but small personal projects.

    0
  19. 19

    Chris your missing the negative margin equal height column trick. This is probably the easiest way to do equal height columns and it works in every browser I’ve tested.

    The general idea is that you give your columns a large negative bottom margin and an equally large bottom padding. Then wrap the columns in another container and set the container’s overflow to none. The only catch with this technique is that you can’t have a bottom border on the columns, however you can put a bottom border on the container.

    0
  20. 20

    Nice stuff,

    But there is one issue with the dynamic width menu design: end user text size changes makes the list look ugly…

    0

↑ Back to top