What is the best way to set width and height of elements? [closed]

Question

Every website has elements and their width and height must be set. here is my question how do we can set the width and height such that the website works correctly on different monitors with different width/height? is px preferred to %? when we should px and when we should use %? what are advantages and disadvantages of each one?

Answer 1

It all depends upon the type of your website and how you want to response to various screen resolutions.

Just using % and px is not enough, there are other unit for text size for example em and pt etc.

Also we have media queries

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

http://www.htmlgoodies.com/html5/client/common-techniques-in-responsive-web-design.html#fbid=YIeEpYZXBt-

Relevant SO Question Responsive Layout - PX, EM, or %?

Answer 2

Use px when you want to specify a fixed/static height in pixels. % refers to the percentage total of the elements parent. Using percent means the web site will adapt when the browser is resized wheras using pixels it will not.

Which one you choose really depends on the look and feel that you are trying to achieve.

Answer 3

it all depends of what kind of web you plannning to do.

Many web pages use a container with a fixed width on pixels (like 960px). then it's extremely easy if you have a well-made predesign on photoshop, illustrator, indesign, etc to work with pixels. These webs though doesn't work well outside PC screens as if you have a window width smaller than the container the content won't be show unless scrolling horizontally.

Now, if you want your content to adjust to any horizontal width you should use % but imo it is much difficult and you need a clear idea what you want to show on each possible width before starting working.

If you decide to go for a "responsive" design... the work will be harder. I recomend you to use something like:

@media screen and  (min-width:600px) {}
@media screen and  (min-width:800px) {}
@media screen and (min-width:1024px) {}
@media screen and (min-width:1524px) {} 

in your CSS to tweek your classes wahtever necesary for each width (or platform). (there's also many other usefull @medias