html - how do 100% -100px with css and jquery -

html - how do 100% -100px with css and jquery -

i'm using same code in css , jquery:

width: 100% -100px;

so, utilize code:

$(document).ready(function(){ $('.left').css('width', '100%').css('width', '-=100px'); });

but not work when browser resized after loading site will. want working similar code:

.left { width: 80%; //100% -100px; } .right { width: 20%; //100px; }

solution using css2:

html

<div class="container"> <div class="left"></div> <div class="right"></div> </div>

css

.left { position: absolute; left: 0px; right: 100px; background-color: green; } .right { width: 100px; background-color: red; float: right; } .left, .right { height: 50px; } .container{ position: relative; }

working fiddle

in above fiddle, applied position: absolute .left container. makes container not stretch parent element (hence, layout break). if sure .left container's height less .right container, go above solution. or else if know .left container's height more .right container's height go solution. fiddle.

if unsure of heights of containers , don't want break layout, think improve go javascript. (no need of javascript, if know of container's height)

jquery html css asp.net