Where Do the Lost Pixels Go in a Percent CSS Layout

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

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:

• http://ejohn.org/blog/sub-pixel-problems-in-css/
• http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/

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?

CSS percentage and pixel layout combined

Why not try this approach: http://jsfiddle.net/Er8uX/2/

#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}

I think this is what you want, basically: fixed left and right column, main content according to wrapper width. I've used absolute positioning to keep them in place; on the right one I've used 100% height if you have a column with a background and want it to run all the way down, the left one has height according to content.

CSS Percentages And Pixels

% value in margin and padding is always % of the parent's width.

So say you have a <div> with margin-bottom: 25%;, inside another <div> which is 1000px wide, then the bottom margin of the <div> is 1000*25% = 250px.

.container {  width: 100px;  background: green;}
.child25,.child45,.child-none{  background: yellow;}
.child25 {  margin-bottom: 25%;}
.child45 {  margin-bottom: 45%;}

<div class="container">  <div class="child25">This one should have 25px margin bottom.</div>  <div class="child45">This one should have 45px margin bottom.</div>  <div class="child-none">This one has no margin</div></div>

line-height: 1.4em;

line-height: 1.4;

#maintext {
    width: 60%;
    min-width: 8em;
    max-width: 40em;
}

div{  background:red;  height:24px;  width: calc(100% * (540 / 750));               /* 72% */}

<div></div>