How to place one div up and the other down? - html

Question

I have one div and under that i have kendo grid. I want to give 100% height or auto height to div but when i give that Kendo Grid header is getting long and close that div as in image
But i want to show view like this
I don't want to give fix value to first div element because item detail is different for all detail so it need to be auto.
Here my 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>
Thanks

Answer 1

First of all this answer helped me here
I gave class name to my grid and i float:left this two div then used clear div after that problem solved.
.div1 {
float:left;
}
.clear {
clear:both;
}
.grdTank
{
width: 100%;
float:left;
}