[ACCEPTED]-Why use percentage value for div's width in CSS?-css

Accepted answer

Score: 10

I, personally, dislike websites which have 22 a % width for the main content area because 21 of the inconsistency. It's best to use a 20 pixel width of about 1000 pixels, maybe 19 a bit less, for the whole website so that 18 it will work for all resolutions.

As for 17 elements inside the main content area, I 16 tend to use percent widths because I don't 15 really want to both with calculating the 14 exact pixel values. The result is set in 13 stone anyway because the thing that it's 12 a percentage of is constant, as opposed 11 to the monitor's resolution, which varies 10 between users.

To sum it up: only use percentages 9 when every user is going to get the same 8 result because of a parent element having 7 a fixed (pixel) width. Otherwise there will 6 be inconsistencies in your design, making 5 it so that you can't use any flashy images 4 and the website may look ugly to users with 3 giant / tiny monitors. If you are going 2 to use percentage widths you simply have 1 to test the website with different resolutions!

Score: 7

Save the following html to a file and open 4 it with your web browser. Now change the 3 size of the web browser window, notice the 2 percent will expand and contract and the 1 pixels don't.

<!DOCTYPE html>
<html>
<head>
<title>Pixels and Percents</title>
<style>
html,body {
    margin:0;
    width:100%;
    height:100%;
    background:blue;
}

.pixels {
width:100px;
height:20px;
background:green;
}

.percent {
width:50%;
height:50%;
background:red;
}

</style>
<head>
<body>
<div class="pixels">
PIXELS
</div>
<div class="percent">
PERCENT
</div>
</body>
</html>

Score: 3

Although certainly not the only reason, use 12 percentage to take up a certain amount of 11 space of something you don't initially know 10 the container parents width of.

For example, let's 9 say I want my div element to always occupy 8 at least 50% of the viewers browser window, I 7 could write that as:

<div style="width:50%">
    This will take up 50% of the width
</div>

Doing this the fixed 6 way by using "px" will require 5 you know the resolution of the browser if 4 you want at least 50% width taken up. You 3 could do this using JavaScript, but CSS 2 is much more easier and faster.

Some other Examples using tables, divs, and 1 animations: http://jsfiddle.net/BLQp7/1/

Score: 3

I find web sites that don't fit the screen, either 6 leaving white space (which can be considerable) round 5 the edge of the content, or falling off 4 the side with a scrollbar (or, worse, falling 3 off the side withOUT a scrollber!) intensely 2 annoying.

I write my pages to fit the screen, regardless 1 of how large that screen is.

Score: 1

It's not clear which context you are referring 7 to (what type of elements). However, you 6 need to be careful when using pixels for 5 font sizes.

I generally use pixels for divs 4 to keep my layout as expected. But I avoid 3 pixels for fonts. Different users may want 2 the font at different sizes. Why take that 1 away.

Score: 1

the benefit of using % is than you can use 2 all 100% of user interface, and give best 1 experience no mattet

Score: 1

Because if it's percentage based content 12 flows making it easier to implement a responsive 11 site (easier = (less (time = money))).

Drop 10 the relevant floats, sort out your menus 9 and and anything else after dropping in 8 some media queries and you've got a site 7 working on different resolutions and devices.

I 6 use a fluid grid system using percentages 5 and a ems for text sizes. Pixels are easier 4 to work with but not in responsive terms. I 3 do wrap my size in max width container.

Remember 2 though everything boils down to pixels in 1 the end.

Score: 0

All in all, if you use images on your site, using 4 percent for main contianer may not be the 3 best approach. In that case, you'd want 2 to use pixels.

Advice: Use Pixels for main 1 contianer and percent for content.

Source: stackoverflow.com

[ACCEPTED]-Why use percentage value for div's width in CSS?-css

How to detect which one of the defined font was used in a web page?

Why is my element with position:absolute always showing up underneath position:relative items?

fastest way to use css for html table without affecting another html table

css background image positioning (negative position?)

Apply CSS to Content Page in Asp.NET

Are there any good reasons for using hex over decimal for RGB colour values in CSS?

How to modify STYLE attribute of element with known ID using JQuery

Google Maps API v3: InfoWindow not sizing correctly

Can an abbr tag's title be styled?

Is there a way to get a web page header/footer printed on every page?