compact css grid

css/gpxedit.css

@@ -34,11 +34,6 @@ div.durationcol{
     margin-right: 2px;
 }
 
-div#logofolder{
-    margin-left: auto;
-    margin-right: auto;
-    width: 100px;
-}
 
 div#logo, div#logo img {
     height:80px;
@@ -66,7 +61,6 @@ div#logo {
     width: 65px;
     background-size: 65px 65px;
     background-repeat: no-repeat;
-    margin-left: 15px;
 }
 
 
@@ -849,18 +843,21 @@ select#loadtypeselect{
 }
 #loaddiv {
     display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-rows: 50% 50%;
+    grid-template: 50% 50% / 80px 1fr 1fr;
 }
 #loadButton {
-    grid-column: 1 / 3;
+    grid-column: 2 / 4;
     grid-row: 1;
 }
 #loadFolderButton {
-    grid-column: 1;
-    grid-row: 2;
-}
-#loadtypeselect {
     grid-column: 2;
     grid-row: 2;
 }
+#loadtypeselect {
+    grid-column: 3;
+    grid-row: 2;
+}
+div#logofolder{
+    grid-column: 1;
+    grid-row: 1/3;
+}

templates/gpxcontent.php

@@ -8,21 +8,19 @@
 <!-- Tab panes -->
 <div class="sidebar-content active">
 <div class="sidebar-pane active" id="ho">
+    <div id="loaddiv">
         <div id="logofolder">
             <div id="logo">
                 <!--p align="center"><img src="gpxedit.png"/></p-->
                 <div>
                 <p id="versionnumber">v
-<?php
-p($_['gpxedit_version']);
-?>
+    <?php
+    p($_['gpxedit_version']);
+    ?>
                 </p>
                 </div>
             </div>
         </div>
-    <div style="clear:both"></div>
-    <hr/>
-    <div id="loaddiv">
         <button id="loadButton"><i class="fa fa-file-o"></i> <?php p($l->t('Load file'));?></button>
         <button id="loadFolderButton"><i class="fa fa-folder-open-o"></i> <?php p($l->t('Load directory'));?></button>
         <select id="loadtypeselect">