Question

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>

Answer 1

The problem is with the word variable, you see. Have a look at this article here: http://www.alistapart.com/articles/holygrail/

What it describes is the case for two fixed width and one width columns. Given this, you should be able to create a layout with as many fixed and variable width columns as you want.

However, there are always limitations, and if you use too many columns the stylesheet can get messy. Why don’t you explain in greater details what variable here means strictly, so that we can help you better?

---

Edit

In your case, the answer is certainly no, you have to use Javascript. There are other possibilities, like generating the styles dynamically on the server-side, or using display: table, but I would recommend against any of these. They are incredibly troublesome, and difficult to maintain. Using Javascript here also gives you more flexibility in determining the ratio and widths of the fluid columns.