Question

Currently I am using JQuery to loop through all elements to resize them accordingly. This is what I do:

$('input.myinput').each(function () {
    $(this).css('width', ($(this).parent().width() - 50) + 'px');
});

This allows the input to be full width with only enough space left for my 50px button on its right.

This executes on window-resize. And there are about 100+ of these inputs on my site.

So are there any other ways to do this? Preferably using only CSS.

Answer 1

It’s possible to hack this by adding an inner/outer div with % width and setting a negative margin px on the inside one. Otherwise there is no way to do this reliably/cross browser with CSS at this moment in time.

See here for examples.