How to position divs in nice little rows

Question

I would like to position 8 divs in the following way:

Here is my JSfiddle which has all the div code: http://jsfiddle.net/XRTh5/

What I would like to do is make the div's behave the same way as on this website with it's icons" http://cyberdust.com/. See how when you re-size the page, the icons shrink and get smaller instead of not changing?

Thanks for the help. I would like to do this only using `div's and not using tables or any old technology like that.

Answer 1

Strongly suggest you look at using a framework to accomplish this just as the reference website uses.

But in general it can be accomplished with css and the @media (min-width: 768px) {} which applies different css styles when the browser viewpoint/window is resized.

There are a couple but for your specific need they use bootstrap.js http://getbootstrap.com/