Randy Hall Randy Hall - 2 years ago 151
CSS Question

CSS calc() for inverse width isn't working

I have an element that I want to increase in

as its parent decreases in

The equation should look something like:

width:calc(150 + 500 / 100%);

But at least in Chrome it says the property is invalid whenever I try to divide by percent width.

Is this possible? (Alternatives to
are acceptable)

I added spaces (didn't realize about that). Tried it with a variety of units, no luck yet.


<div style="width:100%;position:relative;">
<div style="width:calc(150px + (500 / 100%));position:absolute;top:0;left:0;">This one should get bigger as the page gets smaller</div>

Thought process:

Fixed width (150px) plus 500 divided by the current parent width.

So if the parent is 500px:

150 + 500/500 -> 150 + 1 = 151

Parent is 100px

150 + 500/100 -> 150 + 5 = 155

Parent is 20px

150 + 500/20 -> 150 + 100 = 250

Answer Source

Solution is so simple it's mind-boggling. Move the 500px into the first part and subtract the width.

width:calc(650px - 100%);

Gets wider as its parent gets narrower.

Updated fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download