# HTML in percentage and not in pixels

• Posts: 112

3+ Months Ago

Hi,

My website is created in pixels, width=980px for example for the full width of the page.

I would like to change it to percentage so it holds the same ratios in any resolution, how would i calculate that? or how to proceed on that?

example: table width=9px, instead of that how do i know what percentage the table must be?

Is there just simple math behind this?

Thanks for any help

kanexpo
• Scuffle
• Posts: 6228
• Loc: South-Africa

3+ Months Ago

well, the whole container will be 100% ... and that would make up the screen ... so you'll just have to work it out I guess ... except if you want to work out each thing on its own, so lets say that block that you had was 9px and you know that the whole container is 980px so the way to work out the percentage of the screen that it takes up would be as follows: (9/980) * 100 ... 0.918.. but please not that you can only add integers, so it has to be rounded up to 1% width ...
• a.k.a. dM
• Posts: 5143
• Loc: SC-USA

3+ Months Ago

If you use percentage based measurements, the browser will figure out how much space is available.

Code: [ Select ]
#container{width:50%;}

If you're looking to perform mathematical calculations, you'll have to wait. The CSS3 spec does include a calculation function, but this hasn't been implemented in all browsers.

http://www.w3.org/TR/css3-values/#calc
• Beginner
• Posts: 36

3+ Months Ago

HI

thanks
• Novice
• Posts: 15

3+ Months Ago

First of all.. the best width for the page to suit all resolutions is 780px. and the best percentage is 65 - 80 %.

Mathimaticly.. to calculate the percentage of a value:

we work with the scissors method, substitute the real values for the following rule:

Part/whole = percentage/100

The value we want to get is "percentage".

the known value is 100.

the whole is (let's assume it with the width 800px "for the lowest resolution" and subtract 20px for the scroll bar, to be 780px)

the part is the value u wanna know it's percentage.. assume it's 10px (that's the rule, u can apply it whenever u want on any values)

let's do it: (part * 100) / Whole = the percentage
The result is: (10 * 100) / 780 = 1000 / 780 = 0.78%.

That's it...

I hope that helps...

Best Wishes.......
• Novice
• Posts: 17

3+ Months Ago

I concur with Maisara-WD, the best width for the page to suit all resolutions is 780px. In fact, it tends to be default width for most pages.

Good luck with that kanexpo2!

## Post Information

• Total Posts in this topic: 6 posts
• Users browsing this forum: No registered users and 22 guests
• You cannot post new topics in this forum
• You cannot reply to topics in this forum
• You cannot edit your posts in this forum
• You cannot delete your posts in this forum
• You cannot post attachments in this forum