Where do the lost pixels go in a percent CSS layout? [duplicate]

by

If, for example, you’re using a % width, and the exact width should be 103.333px, then the browser must make a decision on how display that.

Different browsers make different decisions, read these links for more information:

I particularly like this explanation from John Resig/David Baron of why this is even a problem:

I was talking this over with some
Mozilla developers and David Baron
explained the situation quite well:

We’re trying to meet a bunch of
constraints that can’t all be
satisfied at the same time (the proof
is left as an exercise to the reader,
though I may have actually written it
out once in a Bugzilla comment):

  1. 4 adjacent objects of width/height 25% (for example) starting at one edge
    of a container should end exactly at
    the other edge; there should never be
    an extra pixel in the container and
    they should never be wrapped due to
    being a pixel to wide

  2. objects that are logically adjacent should always touch visually; there
    should never be a pixel gap or a pixel
    of overlap due to rounding error

  3. objects given the same width should occupy the same number of pixels

  4. object boundaries should always (visually) be aliased to a specific
    pixel boundary in the display (they
    should never be blurred)

The one [Mozilla] sacrifices is
typically (3), except for borders
where we sacrifice (1) by rounding the
widths to pixel boundaries much
earlier.

See this question for a JavaScript fix that forces consistency:

Evenly distributed height of child elements with CSS

Another relevant question:

Are the decimal places in a CSS width respected?

More Related Contents:

  1. Hiding the scroll bar on an HTML page
  2. Browsers’ default CSS stylesheets
  3. See :hover state in Chrome Developer Tools
  4. How can I resize an image dynamically with CSS as the browser width/height changes?
  5. How can I determine what font a browser is actually using to render some text?
  6. What does it mean when a CSS rule is grayed out in Chrome’s element inspector?
  7. Browser support for CSS :first-child and :last-child
  8. How to Identify Microsoft Edge browser via CSS?
  9. When setting a font-size in CSS, what is the real height of the letters?
  10. What does @-moz-document url-prefix() do?
  11. How do browsers deal with non-integer values for height and width?
  12. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera
  13. How do browsers read and interpret CSS?
  14. Change a HTML5 input’s placeholder color with CSS
  15. Border Gradient with Border Radius
  16. Wait for fonts to load before rendering web page
  17. How can I center elements horizontally or vertically with Twitter Bootstrap?
  18. How to store inherit value inside a CSS variable (aka custom property)?
  19. Create webfont with Unicode Supplementary Multilingual Plane symbols
  20. issue with CSS media queries(scrollbar)
  21. Select nth-child across multiple parents
  22. How can I remove the gloss on a select element in Safari on Mac?
  23. CSS two div width 50% in one line with line break in file [duplicate]
  24. Can I have a varying number of columns per row in a CSS grid?
  25. How to override global CSS in a CSS module file?
  26. Combining border-top,border-right,border-left,border-bottom in CSS
  27. How to horizontally center a floating element of a variable width?
  28. Sass and rounding down numbers. Can this be configured?
  29. SASS calculate HSL Difference between 2 colours
  30. How to style menu button and menu items

Leave a Comment