Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why would you use a HTML/CSS width of 99.9% instead of 100%?

I have seen many developers writing HTML or CSS inline style widths of 99.9% in places where I would use 100%. Is there any valid reason for using 99.9%? Does it have any effective difference from 100%?

EDIT to retweet MSalters' very good question: Considering that 99.9% is one pixel off above 500 pixels, why not 99.99%? I'd guess he's right, that if you're going with the dirty hack you should use 99.99%, does anyone disagree?

Additional References:

  • @Michael Stum's comment about the CSS zoom property led me to this interesting link about triggering hasLayout with zoom: http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm.
  • @Andrew Dunn offered this incredibly comprehensive link on hasLayout: http://www.satzansatz.de/cssd/onhavinglayout.html
like image 840
Scott Stafford Avatar asked Oct 01 '10 13:10

Scott Stafford


People also ask

Can we give width more than 100% in CSS?

Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.

What does width 100% do in CSS?

width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.

What does width 100% do in HTML?

If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.

Why do we use max-width in CSS?

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width .


2 Answers

The hasLayout property

It's a dirty hack used to set the IE specific hasLayout property of the element to true. The hasLayout property "determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events." Giving an element layout is an easy way to fix many layout related bugs which appear in Internet Explorer.

What's with the 99.9%?

Setting the width to 99.9% is one way to trigger it. The reason you would use 99.9% is because layout is given to an element if its width is set to anything other than auto. Setting it to a percentage prevents the need to use a fixed width.

After some testing in jsFiddle, I've come to the conclusion that it really isn't necessary to to use a width of 99.9%, using a width of 100% is just as effective. http://jsfiddle.net/3qfjW/2/ (IE-Only). It seems that setting width to 99.9% may have been a common misconception which stuck.. Spread the word people.

Other methods

You can also trigger hasLayout using zoom: 1; While this is the preferred method for many, as it doesn't mess with other style related features of an element, it is also invalid CSS code, which is not an option to use for some developers.


Further Reading

For more methods to trigger hasLayout check out: http://www.satzansatz.de/cssd/onhavinglayout.html

For more information on the hasLayout property check out the MSDN article on hasLayout http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx (This is actually a great read, lots of detailed information)

like image 97
Randy the Dev Avatar answered Sep 22 '22 18:09

Randy the Dev


It's true width of anything but auto and zoom trigger hasLayout, and zoom is the more flexible property/value since it doesn't mess with the width but I don't think that's the reason why you saw the developers use 99.9%.

In certain floating cases it's necessary that the combined width of the floats do not add up to 100% ( if specified in percentages ) because IE6 incorrectly calculates that as beyond 100% and usually the latter float drops.

The solution is to either specify a -1px right margin just for IE or make the sum 99.99%.

I have documented the bug here. So whether it is related or not to what you were seeing, hope the bug link helps anyone experiencing it.

like image 28
meder omuraliev Avatar answered Sep 22 '22 18:09

meder omuraliev