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> 

Answer 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.'

Answer 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.