Is there any work around to do something like this work as expected?
I wish there were something like that width:remainder;
or width:100% - 32px;
.
width: auto;
doesn't works.
I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;.
I like to get the same result as this, without tables http://jsfiddle.net/LJGWY/
<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
<div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
<div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
You can acheive this without change your markup with use
display:table
property for this:Check the live example with no
horizontal scrollbar
http://jsfiddle.net/WVDNe/5/
Another example but in better way check this:
http://jsfiddle.net/WVDNe/6/
note: it not work in IE7 & below
Check this also
http://jsfiddle.net/LJGWY/4/
It's work in all browsers.
You could put the
fixed div
inside the thefill div
.CSS
Example: http://jsfiddle.net/EM8gj/3/
This should do for you:
See the jsFiddle
This is assuming you're going to be removing the 3px borders from the end result (they overlap in the example because border width is not included in the width).
Try setting the position like so:
Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the other will fill the remaining space.
http://jsfiddle.net/5AtsF/
If you don't know how big will be the fixed part you can use the flex 9999 hack.