I have a variable number of divs acting as columns, and I would like a variable number of them to have static widths (in pixels) and a variable number of them to expand to the remaining width in the window. If I make the fluid column widths combine to 100%, some columns will be squeezed out of the row - do I need to use javascript to substract the widths of the static columns to determine the fluid columns' share of the window width, or is there a css attribute that I can use?
By variable, I mean I don't know in advanced how many fluid or static columns there are, so I can't use a prebuild 2 or 3 column templates.
Here is an example of what I mean:
<style> #ColumnContainer > div { display:inline-block } </style> <div id="ColumnContainer"> <div style="width:200px"></div> <div class="FluidColumn"></div> <div class="FluidColumn"></div> <div style="width:100px"></div> <div class="FluidColumn"></div> </div> <script> /* Do i need to do this... 1. get window width 2. add the widths of all divs inside #ColumnContainer without the 'FluidColumn' class 3. subtract the total static width from the window width 4. divide this remaining width by the number of divs with the 'FluidColumn' class 5. set the the width, in percentage, for the divs with the 'FluidColumn' class */ </script> <style> // Or... .FluidColumn { width: ??? } // is there a special width attribute that works this out? </style>