Mixing percent and fixed CSS

Question

This is a duplicate from UI.StackExchange.com:
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Should you ever apply percentage and fixed CSS together? Will it cause problems, and if so what kinds?

• Does mixing degrade browser render performance?
• Will mixing give you weird results on initial load with progressive rendering browsers?

Below is just a dumbed-down example of mixed usage, it could be any mixture. I am not looking for validation of the example. I have heard you should never do what I have in the example below, so I am trying to find out if using CSS in this manner is an issue.

Example mix usage:

<style>
.container
{
    width:300px;
}
.cell
{
    width:25%;
}
</style>

<table class="container">
     <tr>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
     </tr>
</table>

Solution 1

+1 Good question. You may want to have a look at this article: "Fixed-width, liquid, and elastic layout" It goes over fixed width layout (em) and elastic layouts (%), and if you click to go to the next page it looks at 'Elastic-liquid hybrid' - where width: is set one way, with max-width: set the other. I know the article linked to above isn't exactly what you asked, but it's an example of mixed use within a single CSS style.

---

Edit: After some further reading I did find a quite a few contradictory opinions on the subject. I found several articles that held the idea that "you just can’t mix up pixels and percentages". Though, for the most part, these sites were fairly dated. When I narrowed the search to only articles that have been put up within the past year, things changed a bit. There were still a few opinions against mixing, but they typically didn't explain why, and seemed to of the "I always heard it was a bad idea" variety. The majority of more recent information that I've found on the topic seems to indicate that mixing percentage with fixed widths is a perfectly acceptable practice, as long as it's done with an understanding of the results.

see:

• "Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?" (Jun 2009)
• "For A Beautiful Web: Changing Man Layout" ...

Full Disclosure: I've been a mixer for many years, without really knowing whether my approach was 'correct.'

Solution 2

This should help clear up when it is ok to mix percent and pixels and when it is not.

Mixing percent and pixel widths wouldn't be a problem when you do it as in your example;

.container
{
    width:300px;
}
.cell
{
    width:25%;
}

When it becomes a problem is when you reverse the order;

.container
{
    width:25%;
}
.cell
{
    width:250px;
}

In this case, if the browser window (or the parent of .container) is less than 1000px, 25% on .container will be less than 250px and cause .cell to overflow .container.

It also becomes a problem when you mix percent and pixels in the case of width plus padding;

.container
{
    width:300px;
}
.cell
{
    width:100%;
    padding: 10px;
}

This will cause .cell to have a width of 320px (100% + 10px + 10px), and overflow .container.

Let me know if that helps clear things up.

Solution 3

The way you have it is fine. Each cell calculates to 75px. The only times you have to be careful with percentages is when rounding kicks in.

In your example, if you're container was 303px, each cell would evaluate to 75.66666px and round up to 76px, for a total of 304px which would be larger than the container. That one pixel causes all kinds of trouble.

Solution 4

From the research I have done, it appears how you target your CSS(id,class,universal...etc) is most important in browser render performance.

Efficiently Rendering CSS

Writing Efficient CSS for use in the Mozilla UI

Optimize browser rendering

Solution 5

I can't find any documented evidence with test cases to prove this. Could you point us to where you read about this?

I find mixing the two quite useful and I see it a lot out in the wild on reputed / high traffic sites also.

The only issue that mostly affects older browsers and IE is rounding. Have a read here:

http://ejohn.org/blog/sub-pixel-problems-in-css/

http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/

View more solutions

Comments

[rick schott]

I don't have any evidence, its a lot like Bigfoot. :) I am trying to debunk the myth, if it is one, from people that may know; because I sure don't.

[rick schott]

It helps, but I am really looking for how the mixing may confuse the initial load of progressive rendering and the performance impact on the browser.

[Jo Sprague]

If you think about it, any element with percentage width is contained at some within the "fixed" width html element. If anything, it might be more difficult for an older browser to layer percents (25% of 25% of 50% of html) than to put percent width within fixed width (25% of 300px).