Menu
I've noticed in my own work that 3 fluid columns fill out their parent element much better when their widths are set to 33.333% as opposed to just 33%. I've also noticed when researching various CSS frameworks (i.e. bootstrap.css) that they have 14 decimal places specified on their column widths! That seems like it would be either excessive or clever... but I don't know which.
So what is the value/benefit of having so many decimal places? From what I have gathered, there is an open debate on whether you should avoid decimal places or take advantage of them and I want to know if this should be of interest to me or to just not worry about it.
559
The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none .
Although you can use decimal places in CSS like 100.0% in reality it best to keep to real numbers for percentages and only upto one decimal place with standard linear integer values. Your 2.9… probably would be read as 3. Furthermore you have to remember many elements use padding, margins and borders.
Try It: Set the width of an image using a percentage and resize your browser window. For the width attribute, you can also use percentages, where 100% is the total space available. So, if you wanted an image to be one quarter the width of the window, you could set width to 25% (one quarter of 100% is 25%).
It is required in some cases. I'm working on a site using the Twitter Bootstrap which has 6 divs stretching the full width of the site. If I just make the width of each one 16.66% a noticeable gap is left at the end, if I make the width 16.67% one of the divs is pushed onto the line below. This meant to get the divs to fill the full space, I had to set the width to 16.6667% which works perfectly in Chrome and Firefox but it seems that Safari and IE round the decimal point down to 2 places so I'm left with a gap when using them. So sometimes it might seem excessive but other times it is actually needed.
Dave
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
