[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>
<title>Pixels and Percents</title>
html,body {

.pixels {

.percent {

<div class="pixels">
<div class="percent">
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

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.

More Related questions