I need to create the following layout:

|  fixed |  variable         | variable     |   fixed   |
|  width |   width - p2      |  width - p1  |   width   |

Where the two middle boxes, with their variable widths have the priority p1 > p2. The content in these two boxes will never result in two lines of text (vertically) as the p2 box will use elipsis when the text is too wide for the box.

More ascii art examples!

| <img/> | A person @ A Location     |Today |   Accept  |

| <img/> | A person @ A Location w...|Today |   Accept  |

| <img/> | A person @ A ...|Yesterday @ 3pm |   Accept  |

So you'll see the "p2" box grows (there will be a maximum width) and the "p1" box shrinks to accomodate the width increase.

I really wish CSS permitted dimensions to be expressed as equations using jquery-esque traversal and css selectors! i.e.

.style {
   width: $(this).parent.width - $('other_div).width ;

I am completely amenable to having this layout done in tables if it is easier to accomplish, i.e. if it requires less/no per-browser tweaking.



2 answers

danwellman 5600

You can (sort-of) use equations to determine values in CSS, they just don't perform very well and only work in IE. Firebug states of them thus:

CSS expressions (supported in IE beginning with Version 5) are a powerful, and dangerous, way to dynamically set CSS properties. These expressions are evaluated frequently: when the page is rendered and resized, when the page is scrolled, and even when the user moves the mouse over the page. These frequent evaluations degrade the user experience.

(emphasis my own)

However, you may be able to come up with a pure CSS and table-less solution that works in decent (e.g. standards-compliant) browsers, then use a CSS expression to get the same effect in IE..?

Answered about 9 years ago by danwellman

Why not use a table? It's behaviour is exactly what you want, and it looks like you're displaying tabular data. You'd set a specific width on the first and last columns and then leave the others blank.

Answered about 9 years ago by Fireflight
  • How do I denote the priority of the right hand center column? Michael Ossareh about 9 years ago
  • With p1 and p2, the column with the larger amount of text will become wider by default. In your example above, p1 would be as wide as the third example for all the cells in the column. There's no way to denote the specific priority, although you could use some javascript/jquery to dynamically set the width of the the p1 column to your liking. Fireflight about 9 years ago