Percentage minus pixels in CSS?

As far as I know, there is currently no easy or direct way to set the width or height of an element to a percentage minus a measurement of pixels (e.g. width: 100%-150px;).

Is this something that is being considered to be added into CSS in the future? I haven’t found any discussions on this possibility. I think this would be a great feature.

To be honest? Nope. Would cause a lot more problems than it would allegedly try to solve.

Would cause a lot more problems than it would allegedly try to solve

Could you explain some more?

Just off the top of my head (FYI, I was pretty darn sick this past week), you have the issue of what a browser does when a percentage creates a fraction of a pixel. Some round up, others round down.

That’s just one. I rarely work with pixels anymore, so I’m sure either Tommy or Paul will be more than happy to shed more light on the matter.

I can understand the desire for a feature like this, and it shouldn’t be too difficult to implement. The main problem might be that it won’t fit into the declarative pattern in CSS, so that parsers and lexical analyzers would have to undergo major changes to cope with it.

It’s almost always possible to circumvent the need for this sort of thing, although it frequently results in adding unnecessary markup. You can add a wrapper element with a 150px padding or margin, and then set the width of the interior element to 100%.

I voted no.

Sure this can be useful in some designs (aka width:100% -1px for something) but as Dan said there would be too many faulty versions of this at play. What you wnat is completely possible if you are willing to add markup and do what Tommy said.

And it would only be necessary for floated boxes.

For boxes in the normal flow (static or relative) you can use an automatic width and specify the margins. For absolutely positioned boxes you can specify the left and right edge and leave the width as auto.

Jumps in here

To add to TOmmy just to not confuse people IE6 will need an expresssion since it doesn’t allow you to specify dimensions via setting both offset properties.

For absolutely positioned elements, yes. But we’re talking CSS here, not MS-CSS. :slight_smile:

I once achieved the effect using a mixture of max-width and negative margins to reclaim the space needed, I don’t know if this is helpful to the OP?

Huh? You were talking about AP elements.

Yes. And for absolutely positioned elements you can specify left and right and leave width as auto to control the horizontal dimension. According to the CSS2.1 specification.

The fact that IE6 doesn’t comply with the specification doesn’t change that. It only means that you can’t use this method if you want to cater to a badly broken browser.

No, you can if you are willing to use an expression as outlined in post 8.