Why HTML/CSS professional developers are using % in width

Question

I am going through few tutorials and I have noticed developers are using % to declare the width of the footer.Why are they using % why don't they use something like width:500px; like they declare the height of the footer.

Possible duplicate of [Which is better to use in CSS, percentage or pixels?](http://stackoverflow.com/questions/7965571/which-is-better-to-use-in-css-percentage-or-pixels) — vivekkupadhyay, Sep 14 '16 at 06:27

Lucky Angelo · Accepted Answer · 2016-09-14T06:20:01.587

2

They do this to make the content responsive to viewport sizes. For example you have a div with 900px width. if a user is using device with a viewport width less than 900px the the div wont fit the screen thus make a crappy user experience

edited Sep 14 '16 at 06:20

answered Sep 14 '16 at 06:15

Lucky Angelo

65
8

So why dont they use it in height of the content too?? – Gladwin James Sep 14 '16 at 06:16
it can be used but i depends on the situation or design – Lucky Angelo Sep 14 '16 at 06:22

score 1 · Answer 2 · answered Sep 14 '16 at 06:19

1

The benefit of using % is than you can use all 100% of user interface, and give best experience in responsive. Advice: Use pixels for main container and percent for content.

answered Sep 14 '16 at 06:19

acmsohail

903
10
32

score 1 · Answer 3 · answered Sep 14 '16 at 06:19

1

% is usefull in comparison to px just becasue it this way your structure/design is responsive.

answered Sep 14 '16 at 06:19

Manoj Gupta

63
1
1
9

score 1 · Answer 4 · answered Sep 14 '16 at 06:28

Usually you want your footer to be responsive so using % is a better option to cover all screen sizes. The main purpose of a footer is usually to have a detailed navigation and hence the height of your footer should be determined by the content itself, thus using % in height isn't usually a good choice. Another reason for using % in height is that you want your footer to cover a major portion of your screen horizontally, eg. a footer with a width of 500px might look good on a smaller screen but not on a larger screen, this is where % gives better results.

From another perspective, it mostly comes down to the design.

score 0 · Answer 5 · answered Sep 14 '16 at 07:46

The difference between height and width, is that documents, plain text or HTML, grow down. User interfaces are designed with that in mind. Input devices are also designed around this idea. Consider mouse scroll wheel, which allows you to easily go up and down, whereas left and right is a bit more clumsy.

Theoretically we could have settled on growing right. We would have horizontal scroll wheels (well, some mice have them, but they are not even close to standard), horizontal scrollbars would be as ubiquitous as vertical ones are now. In that universe specifying width in pixels and height in percents would make sense.

Why HTML/CSS professional developers are using % in width

5 Answers5