Membuat css front-end untuk halaman select driver

css/history.css

@@ -73,7 +73,6 @@ img.history_pict {
     border-radius: 50%;
     display: inline;
     margin: 0;
-    
 }
 
 button.hide_hist_button {

css/order.css

@@ -81,11 +81,6 @@ div.step_name {
 	margin: 5px;
 }
 
-.content div {
-	margin-bottom: 15px;
-	vertical-align: middle;
-}
-
 .content span {
 	width: 35%;
 	margin-right: auto;
@@ -106,8 +101,8 @@ div.step_name {
 
 }
 
-#select_driver div {	
-	border: 0.5px solid black;
+#select_driver h2 {
+	margin: 7px 0;
 }
 
 #preferred_driver {
@@ -122,3 +117,57 @@ div.step_name {
     background-color: #465d43;
 }
 
+#driver_table_container {
+	overflow-y: auto;
+	height: inherit;
+}
+
+img.driver_pict {
+	width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    display: inline;
+    margin: 0;
+}
+
+table.driver_table {
+	margin-top: 5px;
+	width: 100%;
+    padding: 0;
+    border-collapse: collapse;
+}
+
+table.driver_table th, td {
+    padding: 0 5px;
+    border-collapse: collapse;
+}
+
+table.driver_table p {
+	margin: 0 0 5px 0;
+	padding: 0;
+	width: 40%;
+	font-size: 12px;
+	font-style: "Lucida Console", Monaco, monospace;
+}
+
+td.driver_column {
+	padding-top: 5px;
+	padding-left: 30px;
+}
+
+table.driver_table tr td.driver_column {
+	vertical-align: top;
+}
+
+table.driver_table p.driver_username {
+	font-size: 20px;
+}
+
+div.choose_driver {
+	float: right;
+	border: 0.5px solid black;
+	border-radius: 5px;
+	width: 50%;
+	text-align: center;
+	padding: 5px;
+}
\ No newline at end of file

order/select_driver.php

@@ -40,15 +40,19 @@
 							$driver_rating = ($driver_votes == 0) ? 0 : $row['total_score']/$row['votes'];
 							echo 
 								"
-								<table id='tbl_pref_driver'>
+								<table class='driver_table'>
+									<colgroup>
+										<col style='width: 20%;'>
+										<col style='width: 80%;'>
+									</colgroup>
 									<tr>
 		                        		<td>
 		                        			<img class='driver_pict' src='../profile/getProfilePict.php?id=".$driver_id."'
 		                        		</td>
-		                        		<td>
+		                        		<td class='driver_column'>
 					    					<p class='driver_username'>".$driver_name."</p>
 					    					<p class='driver_rating'>&starf;".$driver_rating." (".$driver_votes." votes)</p>
-					    					<div class='button green' onclick='chooseDriver(".$driver_id.")'>
+					    					<div class='choose_driver green' onclick='chooseDriver(".$driver_id.")'>
 					    						I CHOOSE YOU
 					    					</div>
 		                        		</td>
@@ -70,7 +74,7 @@
 		<script>
         	document.getElementById("order_link").setAttribute("class", "menu menu_active");
         </script>
-        
+
 		<div class="order_container">
 			<div class="subheader">
 	    		<div class="title"><h1>Make an Order</h1></div>
@@ -104,22 +108,26 @@
 				</div>
 			</div>
 
-			<form method="post" id="submit_select_drv" action=<?php echo "complete_order.php?id=".$user_id ?>>
-				<?php echo $ppoint . $dest; ?>
-				<div class="content" id="select_driver">
-					<div id="preferred_driver">
-						<h2>Preferred driver</h2>
-						<?php ShowPrefDrv($prefdrv, $con) ?>
-					</div>
-					<div id="other_driver">
-						<h2>Other drivers</h2>
+
+			<div id="driver_table_container">
+				<form method="post" id="submit_select_drv" action=<?php echo "complete_order.php?id=".$user_id ?>>
+					<?php echo $ppoint . $dest; ?>
+				
+					<div class="content" id="select_driver">
+						<div id="preferred_driver">
+							<h2>Preferred driver</h2>
+							<?php ShowPrefDrv($prefdrv, $con) ?>
+						</div>
+						<div id="other_driver">
+							<h2>Other drivers</h2>
+						</div>
+						<input type="hidden" name="picking_point" value=<?php echo $ppoint ?>>
+						<input type="hidden" name="destination" value=<?php echo $dest?>>
+						<input type="hidden" name="selected_driver" id="selected_driver">
 					</div>
-					<input type="hidden" name="picking_point" value=<?php echo $ppoint ?>>
-					<input type="hidden" name="destination" value=<?php echo $dest?>>
-					<input type="hidden" name="selected_driver" id="selected_driver">
-				</div>
-			</form>
-			<?php mysqli_close($con) ?>
+				</form>
+				<?php mysqli_close($con) ?>
+			</div>
 		</div>
 </body>
 <script type="text/javascript">