Search code examples
csssmartadmin

Div using remaining width

I’m using SmartAdmin. I have a widget that is using the Left Tabs. On the right side I’m attempting to have a DataTables table take up 100% of the remaining width. Currently the table takes up 100% width of the parent div and is below the left tabs.

SmartAdmin: http://192.241.236.31/themes/preview/smartadmin/1.5/ajaxversion/#ajax/dashboard.html

How it looks: https://i.sstatic.net/vKpIW.jpg

How I want it to look: https://i.sstatic.net/lWqOe.jpg

JSFiddle: http://jsfiddle.net/xq9mpom6/

Must
Enter
Code
For JSFiddle Link
Solution

  • You can use display:table for parent, and display:table-cell for children, like so:

    .widget-body {
    display: table;
    width: 100%;
}

.widget-body .tabs-left {
    display: table-cell;
}

.widget-body .dataTables_wrapper {
    display: table-cell;
    vertical-align: top;
}

    Updated JS Fiddle:

    http://jsfiddle.net/xq9mpom6/2/