Amending css to percentages instead of pixels

Question

I have recently created this WordPress site and have used pixels and margins to create the layout of the two semi-transparent content boxes. However, as I'm sure those more experienced than me are aware this is not at all responsive and not very cross browser friendly either! So I have been advised to swap to percentages rather than pixels but can't work out where to start with my existing CSS!

Will I need to make a layout with 5 columns to achieve this?

• first column blank to create left hand blank space
• second column to include larger blue content box
• third column blank to create space between two columns
• fourth column smaller blue content box
• fifth column to create far right hand blank space

Is there an easier way?

Here is a link to my existing stylesheet

Any help would be greatly appreciated, or if I've forgotten to pass on some required information please just let me know!

Answer 1

Simplest way to do this:

1. Find the widest element. It's width, XXXpx, is going to be your new 100%.

2. Find every other element with a px value, YYYpx. It's width is going to now be (YYY/XXX * 100)px.

3. Visually go over your site and make sure everything looks right. Not all styles are meant to be percentage based, so you will need to revert a few here and there.

Answer 2

You can take a look to http://adapt.960.gs if you want something more responsive ;) It's quite easy to use:

You have to add the JS file at first:

<script src="js/adapt.min.js" type="test/javascript"></script>

Then CSS (as a fallback in case of JS is deactivated on user browser):

<link type="text/css" rel="stylesheet" href="css/960.min.css" />

At last some JS lines to tell browser to switch the CSS file depends on browser width:

<script type="text/javascript">
  var ADAPT_CONFIG = {
    path: 'assets/css/',
    range: [
      '0px    to 760px  = mobile.css',
      '760px  to 980px  = 720.css',
      '980px  to 1280px = 960.css',
      '1280px to 1600px = 1200.css',
      '1600px to 1920px = 1560.css',
      '1920px           = fluid.css'
    ]
  };
</script>

Then you will be able to use a standard grid in your HTML and it will adapt itself for every uses. The page http://adapt.960.gs/ will provide you additional instruction and demo (try to resize your browser's window or visit it through your mobile) ;)