I have been building a website for a client and created it initially in pixels. However, this was not the best idea as the client is now asking for me to change it to percents.

I can not find an easy way to change everything over to percents and it killing me

I have used many divs in the document - and 1 table.

I have read how to convert it using simple math - but every time I try it does not turn out.

Is there an easy way to change it over? Or do I have to go through the process of resizing all pictures etc?

I am using a style sheet. Gah - I knew I bit off more then I could chew! haha

I tried to change the style sheet last night for a good 4 hours and had to revert back to my original save.

I am just very confused when I set the main div a lets say 75%. Then I have two columns inside that div - which were set at 20% and 80%. This made the second column jump down to the next line - and also didn't change any of the text or pictures within side the divs.

hmmmmm

These divs also have cell padding - which I assume is part of the problem?

Thanks,

Very confused Jakob

the 20 + 80% works if there's no padding and border and margin only I would guess

why does your client want the css in percentage? so it stretches with the viewport? show us an example

there's no easy formula or converter to do so

One thing you can do is uses em instead of %, in a way that will exactly imitate px sizes at default browser font settings. It works like this:

CSS

body {
    font-size: 62.5%;/*this becomes the parent size for the entire document*/
}

Now, any pixel size expressed em will be equivalent to the px quantity one decimal place over. In other words, 1em is equal to 10px at default browser font settings:

p {
    font-size: 1.1em; /*same as 11px*/
}

The advantage of sizing fonts this way is that they may now be re-sized by the user. This same principal may be used for anything, not just font-size, but you must remember, em is proportional to the parent, which means you must be careful.

BTW <div>s don't have "cell" padding.

<div>s are also block elements which means they have an implied linebreak above and below so they are the only element to occupy the horizontal space.

You need to set the width of your left hand column and float it left, then allow the right column to take up the rest of the space.

http://www.modtalk.co.uk/_site/layout/two-column/

Deleted - thanks for help

Be sure to include a css reset stylesheet along additional styles to deal with unexpected padding/margin issues.

- If client's wish for a fluid layout is related to the horizontal scroll required by visitors utilizing lower resolution, perhaps sticking to a 960px width would make them happier (will still require a bit of a horizontal scroll for lower resolution, but it's a pretty reasonable compromise)

Fluid layouts have their bonuses, but also have potential to leave your site looking a bit ridiculous considering the content has to grow/shrink from 800x600 to 1680x1050 or greater and every size in between.