Question

I have a 2 column layout with a sidebar and a main div containing a table.

The sidebar has a fixed width and the main div should have a flexible width so it will always stretch to the end of the screen. Is there a CSS way to do that or do I need to use JavaScript?

HTML

<div id="content" data-role="content" role="main">
    <section>       
        ....
    </section>
    <div id="gridContainer">
        <table border="0" id="tblBrvGrid" class = "background" data-sort = "Name" data-asc_desc = "asc" data-filter = "">               
        <thead>
            <tr>
                <th></th>
                <th class="service sortable" data-field="Name" I18N="COLUMN_HEADER_SERVICE">
                    <span class="sort-asc"></span>
                </th>
                <th I18N="COLUMN_HEADER_STATUS"></th>
                <th I18N="COLUMN_HEADER_PERFORMANCE"></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            ....
        </tbody>
    </table>
    <a id ="gridPaging" class="more-data-active" I18N="MORE_DATA" data-role="button" data-theme="g"></a>
    </div>
    <!-- end #gridContainer -->
</div>
<!-- end #content -->

CSS

section {
  float: left;
  width: 255px;
  border-right: 1px solid #DDDDDD;
}

#gridContainer {
  float: left;
  padding-left: 10px;
  min-width: 70%;
}

table {
  color: #222;
  width: 100%;
}

And here is a more elaborate fiddle: http://jsfiddle.net/RmQR6/

Answer 1

If i understand correctly then may that’s http://jsfiddle.net/RmQR6/1/ you want. Write like this:

#gridContainer {
  padding-left: 10px;
  overflow:hidden;
}