Check this out.... I haven't needed to use it yet, but I'm sure you can manage to make it work. I know a couple people that have.

https://github.com/paulirish/matchMedia.js/

The readme is pretty helpful too. I think this is what you're looking for.

Honestly, I don't do a whole lot of js without just manipulating plugins and stuff... I can see what I can do. I have a feeling someone else is going to come in here and make me look stupid. I'm learning with you.

have you tried

if (screen.width > 640) {
    $(document).ready(function() {
        setHeight('.box');
    });

    var maxHeight = 0;

    function setHeight(column) {
        column = $(column);
        column.each(function() {
            if ($(this).height() > maxHeight) {
                maxHeight = $(this).height();;
            }
        });
        column.height(maxHeight);
    }
}​

or if (document.documentElement.clientWidth > 640) { $(document).ready(function() { setHeight('.box'); });

      var maxHeight = 0;

      function setHeight(column) {
          column = $(column);
          column.each(function() {
              if ($(this).height() > maxHeight) {
                  maxHeight = $(this).height();;
              }
          });
          column.height(maxHeight);
      }
}

@jurotek Is this what you are after? http://jsfiddle.net/joshnh/Mx3RX/

Note: I've taken a mobile first approach with this method. When designing responsively, I am a firm believer that mobile first is the way to go.

@jashuanhibbert Very nice. I'm saving that one for later use.

@joshuanhibbert, Josh, I brought it with me to work and published it on server and Iam experiencing some strange behavior. When you initially open it you get equal height. When you re-size browser to 768px I get no longer equal height. When I refresh the browser at this point equal height is back. When you re-size browser back to full width I get big gap under paragraph. The script you shared with me is as I got it from jsfiddle. I might be doing something wrong with css or media query. I dodn't know. Here's the link: http://thecableconnection.com/Test/index.html

It works great on the initial load, say for a 960px grid on a big browser. However, I have a break point at 959px where everything gets narrower, and then again at 767px where all the columns stack on top of one another. The script needs to refresh at each breakpoint and readjust the column heights as they get narrower, but I'm not sure how to do that.

@joshuanhibbert, thanx Josh, just got home from work was a long day finishing online store in existing website and making it live. I am going to look at it tomorrow when I get to work and I'll get in touch with you then. Cheers.

@joshuanhibbert, you nailed it, got up early cause I couldn't wait to try it, thanx a bunch http://jsfiddle.net/jurotek/AwcXt/embedded/result/

@Fatbat, I'll be guessing here cause I have no knowledge of js whatsoever. If you give your boxes in footer different class name than the ones in content and add that class name to snipet, wouldn't that work?

Edit: I see you mention float clearing issue. You could easily take care of that if you set the display value of your boxes as inline-block instead float left. Here's how I did it. I gave all my boxes .b1 thru .b6 font size 1em. First I floated them left and I checked the position of second box on x axis. I wrote it down. Than I changed display to inline-block and checked the position of second box on x axis again. I took that number and subtracted from it the first measurement taken when the boxes were floated and the difference I applied as margin-right minus Xpx. Hope I make sense.

@joshuanhibbert, here's my final solution to this. Since I din't want at times boxes to be equal height like on class .b6 that stretches full width of content minus left margin or in some other situations, I set the var foo value to .equal and use that class where I want the boxes to be equal height like this.

  // Wrap everything in the document ready function
$(document).ready( function() {

    // Cache variables
   var foo = $('.equal'),
        breakpoint = 640;

    // Run the following whenever the window is resized (also trigger on page load)
    $(window).resize( function() {

        // Remove the style attribute that is setting the height when resizing so that we can let the content dicate the height before  working it out again
        foo.removeAttr('style');

        // Set the height variable back to 0
        var height = 0;

        // Set the height to that of the tallest div
        foo.each( function() {

           if ($(this).height() > height) {

              // If an element's height is larger than what is already stored, store the new height
              height = $(this).height();
           }
        });

        if ($(window).width() >= breakpoint) {

            // If the window is larger than the breakpoint width, set the height for all divs to the largest div's height
            foo.height(height);

       } else {

            // If the window is narrower than the breakpoint, remove the style attribute that is setting the height
           foo.removeAttr('style');
       }

    }).trigger('resize');
});

@joshuanhibbert any ideas on how to make it work with multiple independent rows without having to apply a different class to each row? BTW, the Equalizer repository moved here... https://github.com/CSS-Tricks/Equalizer

Thanks @joshuanhibbert. Understood, and thanks for the reply!

Hmm actually you just want to center the content inside of the block? Instead of modifying the demos here to act like the Equalizer plugin, you can just add this css* to the plugin (demo):

.content-wrap > div:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

.equalizer-inner {
    display: inline-block !important;
    vertical-align: middle;
    width: 100%;
}

You may not like the !important flag in the css. If that's the case, you can just remove the styling from the equalizer-inner in the code at line 36. So change this:

  base.$col.wrapInner('<span class="equalizer-inner" style="display:block;margin:0;padding:0;" />');

to this:

  base.$col.wrapInner('<span class="equalizer-inner" />');

* Note: the css is from Chris' article on "Centering in the Unknown"

Ok, I spent some time working on the Equalizer plugin to allow setting a breakpoint. I'll try to finish it up tomorrow after I make a nice demo and work out the bugs :)

@joshuanhibbert, @Fatbat, @Mottie,

Hi folks. I decided to reopen this thread if I may to keep all my ideas in one place what I am working on and eventually try to use to redesign existing company fixed width website to responsive one. I am hoping to accomplish that sometimes by next Spring, I hope. Maybe I rename this thread to something like "Responsive Ideas" or so.

Thanx to @joshuanhibbert, I overcome first thing and that is equal height to be used if necessary.

For the past couple of days I am working on next element (some type of responsive navigation which would give decent UX) and didn't take much vertical space. After trying several different ideas I settled on this. I moved it from fidle to Codepen. Somehow it doesn't renders correctly in editor but full screen is ok. What is your opinion on this? Is something like this used? Here's the link: http://codepen.io/jiri/full/Fhlgx

Edit: BTW, I say responsive but it's not quite. I had to limit this to 480px cause there's no way I could squeeze lot of existing content objects to 320px. But I'll be happy if I can accomplish that to 480px min.width.

@Mottie: I much prefer the following for vertical centering...

  .vertical-center-wrapper {
    display: table;
    width: 100%;
  }

  .vertical-center {
    display: table-cell;
    vertical-align: middle;
  }

...it's lighter and pixel perfect (doesn't require the -em shim). However, the CSS you posted above doesn't work either. The span measures the height of the content and sets that in the style and then any vertical centering happens within that span, but I want to be vertically centering the content to the height of the column.

Hey @Mottie. Sorry, got busy with other things and only just getting back to this now.

Your demo divs grows taller when the viewport is shrunk but don't get shorter when the viewport is made bigger again.

@Mottie, I don't know why my Fiddle isn't working, but it works perfectly on my test site. I've not had any problems with the older version of Equalizer, it even equalizes divs more than one layer below the outer wrapper which is better, but of course it's not responsive :(