Как разместить один div вверх, а другой вниз?

Question

У меня есть один div и под ним у меня есть сетка кендо.Я хочу задать div или высоту в 100%, но когда я даю, заголовок Kendo Grid становится длинным и закрывает этот div, как на изображении

Но я хочу показатьпосмотреть так

Я не хочу давать фиксированное значение первому элементу div, потому что детализация элементов отличается для всех деталей, поэтому необходимоauto.

Вот мой css & html

<style>
#gauge-container {
    text-align: right;
    margin: 0px auto;
    background: transparent url(@Url.Content("~/Content/linear-gauge-container.png")) no-repeat 50% 50%;
    padding: 18px;
    width: 100px;
    height: 300px;
    float:left;
}
.k-gauge {
        height: 300px;
        display: inline-block;
        zoom:1;
    }
@@media(max-width:768px) {
    .div1 {
        overflow:auto;
    }
}
@@media(min-width:768px) {
    .div1 {
        height:100%;
    }
}
</style>

<div class="div1">
        @for (int i = 0; i < tanklist.Count; i++)
        {               
                    <table>
                        <tr>
                            <td><b>Capacity</b></td>
                            <td>:</td>
                            <td><b>@tanklist[i].TnkKapasite.ToString("N0", nf) LT</b></td>
                        </tr>
                        <tr>
                            <td>Fuel</td>
                            <td>:</td>
                            <td>@tanklist[i].StokKod</td>
                        </tr>
                        <tr>
                            <td>Time</td>
                            <td>:</td>
                            <td>@tanklist[i].Time</td>
                        </tr>
                        <tr>
                            <td><b>Fuel Vol.</b></td>
                            <td>:</td>
                            <td><b>@tanklist[i].FuelVolume.ToString("N0", nf) LT</b></td>
                        </tr>
                        <tr>
                            <td>Ullage</td>
                            <td>:</td>
                            <td>@tanklist[i].Ullage.ToString("N0", nf) LT</td>
                        </tr>
                        <tr>
                            <td>Water Vol.</td>
                            <td>:</td>
                            <td>@tanklist[i].WaterVolume.ToString("N0", nf) LT</td>
                        </tr>
                        <tr>
                            <td>Temperature</td>
                            <td>:</td>
                            <td>@tanklist[i].Temperature</td>
                        </tr>
                    </table>
        }
    </div>
    <div style="height:100%;">
        @( Html.Kendo().Grid<Deliveries>()
                                 .Name("grdTank_" + (string)data)
                                 .DataSource(ds => ds
                                 .Ajax()
                                 .Read(r => r.Action("GridBinding", "Dashboards", new { code = data, tip = tip }))
                                 )
                                 .Columns(columns =>
                                 {
                                     columns.Bound(e => e.Tank).Width(80).Title("Tank");
                                     columns.Bound(e => e.StartTime).Width(100).Title("Start Time").ClientTemplate("#= kendo.toString(StartTime, 'dd.MM.yyyy HH:mm:ss') #");
                                     columns.Bound(e => e.EndTime).Width(100).Title("End Time").ClientTemplate("#= kendo.toString(EndTime, 'dd.MM.yyyy HH:mm:ss') #");
                                     columns.Bound(e => e.Fuel).Width(50).Title("Fuel");
                                     columns.Bound(e => e.DeliveredVolume).Width(100).Title("Delivered Volume").ClientTemplate("<div style='text-align:right;'>#= FormatNumber(DeliveredVolume) # LT</div>").Encoded(true);
                                     columns.Bound(e => e.ProductVolumeAfter).Width(100).Title("Product Volume After").ClientTemplate("<div style='text-align:right;'>#= FormatNumber(ProductVolumeAfter) # LT</div>").Encoded(true);
                                 })
                                .Selectable()
                                .Scrollable(scrolling => scrolling.Height("auto"))
                                .Sortable()
                                .Pageable(pageable => pageable
                                .Refresh(true)
                                .PageSizes(true)
                                .ButtonCount(10))
                                .Filterable(filterable => filterable
                                .Extra(false)
                                .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts with")
                                    .Contains("Contains")
                                ))
                                )
                                //.Groupable()
                                .Resizable(config =>
                                {
                                    config.Columns(true);
                                })
                                .Reorderable(config =>
                                {
                                    config.Columns(true);
                                })
                                .ColumnMenu()
        )
    </div>

Спасибо

Answer 1

Прежде всего этот ответ помог мне здесь

Я дал имя класса своей сетке, и я float:left этот два div затем использовал clear div после решения этой проблемы.

.div1 {
    float:left;
}
.clear {
    clear:both;
}
.grdTank
{
    width: 100%;
    float:left;
}