diff --git a/public_html/images/hide_sidebar_active_48x40.png b/public_html/images/hide_sidebar_active_48x40.png
new file mode 100644
index 0000000..d0335ea
Binary files /dev/null and b/public_html/images/hide_sidebar_active_48x40.png differ
diff --git a/public_html/images/hide_sidebar_inactive_48x40.png b/public_html/images/hide_sidebar_inactive_48x40.png
new file mode 100644
index 0000000..81e3972
Binary files /dev/null and b/public_html/images/hide_sidebar_inactive_48x40.png differ
diff --git a/public_html/images/show_sidebar_active_48x40.png b/public_html/images/show_sidebar_active_48x40.png
new file mode 100644
index 0000000..3396092
Binary files /dev/null and b/public_html/images/show_sidebar_active_48x40.png differ
diff --git a/public_html/images/show_sidebar_inactive_48x40.png b/public_html/images/show_sidebar_inactive_48x40.png
new file mode 100644
index 0000000..25aa7d2
Binary files /dev/null and b/public_html/images/show_sidebar_inactive_48x40.png differ
diff --git a/public_html/index.html b/public_html/index.html
index 6862bc1..c4844de 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -44,147 +44,150 @@
 			<input type="hidden" name="submit" value="submit">
 		</form>
 
-		<div id="map_container">
-			<div id="map_canvas"></div>
-		</div>
-
-		<div id="sidebar_container">
-			<div id="sidebar_canvas">
-				<div id="sudo_buttons">
-					<table style="width: 100%">
-						<tr>
-							<td style="width: 150px; text-align: center;" class="pointer">
-								[ <span onclick="resetMap();">Reset Map</span> ]
-							</td>
-						</tr>
-					</table>
-				</div> <!-- sudo_buttons -->
-
-				<div id="dump1090_infoblock">
-					<table style="width: 100%">
-						<tr class="infoblock_heading">
-							<td>
-								<b id="infoblock_name">FlightAware dump1090</b>
-							</td>
-							<td style="text-align: right">
-								<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
-							</td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td>&nbsp;</td>
-							<td>&nbsp;</td>
-						</tr>
-
-						<tr class="infoblock_body dim">
-							<td>(no aircraft selected)</td>
-							<td>&nbsp;</td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td>&nbsp;</td>
-							<td>&nbsp;</td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td>
-							<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td>
-							<td>History: <span id="dump1090_total_history">n/a</span> positions</td>
-						</tr>
-					</table>
-				</div> <!-- dump1090_infoblock -->
-
-				<div id="selected_infoblock" class="hidden">
-					<table style="width: 100%">
-						<tr class="infoblock_heading">
-							<td colspan="2">
-								<b>
-									<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
-								</b>
-								<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">&#x21D2;</span>
-
-								<span id="selected_flag">
-									<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
-								</span>
-
-								<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
-									<span id="selected_icao"></span>
-								</a>
-								<span id="selected_registration"></span>
-								<span id="selected_icaotype"></span>
-								<span id="selected_emergency"></span>
-								<a id="selected_flightaware_link" href="" target="_blank">[FlightAware]</a>
-							</td>
-						</tr>
-
-						<tr id="infoblock_country" class="infoblock_body">
-							<td colspan="2">Country of registration: <span id="selected_country">n/a</span></td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
-							<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td>Speed: <span id="selected_speed">n/a</span></td>
-							<td>RSSI: <span id="selected_rssi">n/a</span></td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td>Track: <span id="selected_track">n/a</span></td>
-							<td>Last seen: <span id="selected_seen">n/a</span></td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td colspan="2">Position: <span id="selected_position">n/a</span></td>
-						</tr>
-
-						<tr class="infoblock_body">
-							<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span></td>
-						</tr>
-					</table>
-				</div> <!-- selected_infoblock -->
-
-				<div id="planes_table">
-					<table id="tableinfo" style="width: 100%">
-						<thead style="background-color: #BBBBBB; cursor: pointer;">
+		<div id="layout_container">
+			<div id="map_container">
+				<div id="map_canvas"></div>
+				<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a>
+			</div>
+			<div id="sidebar_container">
+				<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
+					<div id="sidebar_canvas">
+					<div id="sudo_buttons">
+						<table style="width: 100%">
 							<tr>
-								<td id="icao" onclick="sortByICAO();">ICAO</td>
-								<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
-								<td id="flight" onclick="sortByFlight();">Flight</td>
-								<td id="squawk" onclick="sortBySquawk();" style="text-align: right">Squawk</td>
-								<td id="altitude" onclick="sortByAltitude();" style="text-align: right">Altitude</td>
-								<td id="speed" onclick="sortBySpeed();" style="text-align: right">Speed</td>
-								<td id="distance" onclick="sortByDistance();" style="text-align: right">Distance</td>
-								<td id="track" onclick="sortByTrack();" style="text-align: right">Track</td>
-								<td id="msgs" onclick="sortByMsgs();" style="text-align: right">Msgs</td>
-								<td id="seen" onclick="sortBySeen();" style="text-align: right">Age</td>
+								<td style="width: 150px; text-align: center;" class="pointer">
+									[ <span onclick="resetMap();">Reset Map</span> ]
+								</td>
 							</tr>
-						</thead>
-						<tbody>
-							<tr id="plane_row_template" class="plane_table_row hidden">
-								<td>ICAO</td>
-								<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
-								<td>FLIGHT</td>
-								<td style="text-align: right">SQUAWK</td>
-								<td style="text-align: right">ALTITUDE</td>
-								<td style="text-align: right">SPEED</td>
-								<td style="text-align: right">DISTANCE</td>
-								<td style="text-align: right">TRACK</td>
-								<td style="text-align: right">MSGS</td>
-								<td style="text-align: right">SEEN</td>
-							</tr>
-						</tbody>
-					</table>
-				</div> <!-- planes_table -->
+						</table>
+					</div> <!-- sudo_buttons -->
 
-			</div> <!-- sidebar_canvas -->
-		</div> <!-- sidebar_container -->
+					<div id="dump1090_infoblock">
+						<table style="width: 100%">
+							<tr class="infoblock_heading">
+								<td>
+									<b id="infoblock_name">FlightAware dump1090</b>
+								</td>
+								<td style="text-align: right">
+									<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
+								</td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td>&nbsp;</td>
+								<td>&nbsp;</td>
+							</tr>
+
+							<tr class="infoblock_body dim">
+								<td>(no aircraft selected)</td>
+								<td>&nbsp;</td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td>&nbsp;</td>
+								<td>&nbsp;</td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td>
+								<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td>
+								<td>History: <span id="dump1090_total_history">n/a</span> positions</td>
+							</tr>
+						</table>
+					</div> <!-- dump1090_infoblock -->
+
+					<div id="selected_infoblock" class="hidden">
+						<table style="width: 100%">
+							<tr class="infoblock_heading">
+								<td colspan="2">
+									<b>
+										<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
+									</b>
+									<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">&#x21D2;</span>
+
+									<span id="selected_flag">
+										<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
+									</span>
+
+									<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
+										<span id="selected_icao"></span>
+									</a>
+									<span id="selected_registration"></span>
+									<span id="selected_icaotype"></span>
+									<span id="selected_emergency"></span>
+									<a id="selected_flightaware_link" href="" target="_blank">[FlightAware]</a>
+								</td>
+							</tr>
+
+							<tr id="infoblock_country" class="infoblock_body">
+								<td colspan="2">Country of registration: <span id="selected_country">n/a</span></td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
+								<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td>Speed: <span id="selected_speed">n/a</span></td>
+								<td>RSSI: <span id="selected_rssi">n/a</span></td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td>Track: <span id="selected_track">n/a</span></td>
+								<td>Last seen: <span id="selected_seen">n/a</span></td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td colspan="2">Position: <span id="selected_position">n/a</span></td>
+							</tr>
+
+							<tr class="infoblock_body">
+								<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span></td>
+							</tr>
+						</table>
+					</div> <!-- selected_infoblock -->
+
+					<div id="planes_table">
+						<table id="tableinfo" style="width: 100%">
+							<thead style="background-color: #BBBBBB; cursor: pointer;">
+								<tr>
+									<td id="icao" onclick="sortByICAO();">ICAO</td>
+									<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
+									<td id="flight" onclick="sortByFlight();">Flight</td>
+									<td id="squawk" onclick="sortBySquawk();" style="text-align: right">Squawk</td>
+									<td id="altitude" onclick="sortByAltitude();" style="text-align: right">Altitude</td>
+									<td id="speed" onclick="sortBySpeed();" style="text-align: right">Speed</td>
+									<td id="distance" onclick="sortByDistance();" style="text-align: right">Distance</td>
+									<td id="track" onclick="sortByTrack();" style="text-align: right">Track</td>
+									<td id="msgs" onclick="sortByMsgs();" style="text-align: right">Msgs</td>
+									<td id="seen" onclick="sortBySeen();" style="text-align: right">Age</td>
+								</tr>
+							</thead>
+							<tbody>
+								<tr id="plane_row_template" class="plane_table_row hidden">
+									<td>ICAO</td>
+									<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
+									<td>FLIGHT</td>
+									<td style="text-align: right">SQUAWK</td>
+									<td style="text-align: right">ALTITUDE</td>
+									<td style="text-align: right">SPEED</td>
+									<td style="text-align: right">DISTANCE</td>
+									<td style="text-align: right">TRACK</td>
+									<td style="text-align: right">MSGS</td>
+									<td style="text-align: right">SEEN</td>
+								</tr>
+							</tbody>
+						</table>
+					</div> <!-- planes_table -->
+
+				</div> <!-- sidebar_canvas -->
+			</div> <!-- sidebar_container -->
+		</div> <!-- layout_container -->
 
 		<div id="SpecialSquawkWarning" class="hidden">
 			<b>Squawk 7x00 is reported and shown.</b><br>
diff --git a/public_html/script.js b/public_html/script.js
index 1f28cab..e680f12 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -197,6 +197,19 @@ function initialize() {
 
         $("#loader").removeClass("hidden");
         
+        // Set up map/sidebar splitter
+        $("#sidebar_container").resizable({handles: {w: '#splitter'}});
+
+        // Set up event handler for expand/collapse sidebar button
+        $("#toggle_sidebar_button").click(toggleSidebarVisibility);
+
+        // Force map to redraw if sidebar container is resized - use a timer to debounce
+        var mapResizeTimeout;
+        $("#sidebar_container").on("resize", function() {
+            clearTimeout(mapResizeTimeout);
+            mapResizeTimeout = setTimeout(updateMapSize, 50);
+        });
+
         // Get receiver metadata, reconfigure using it, then continue
         // with initialization
         $.ajax({ url: 'data/receiver.json',
@@ -929,3 +942,15 @@ function resetMap() {
 	
 	selectPlaneByHex(null,false);
 }
+
+function updateMapSize() {
+    OLMap.updateSize();
+}
+
+function toggleSidebarVisibility(e) {
+    e.preventDefault();
+    $("#sidebar_container").toggle();
+    $("#toggle_sidebar_button").toggleClass("show_sidebar");
+    $("#toggle_sidebar_button").toggleClass("hide_sidebar");
+    updateMapSize();
+}
diff --git a/public_html/style.css b/public_html/style.css
index ff8868c..b8791f2 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -2,10 +2,65 @@ html, body {
     margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
     font-size: 10pt; overflow: auto; height: 100%;
 }
-div#map_container     { float: left; width: 100%; height: 100%; }
-div#map_canvas        { height: 100%; margin-right: 420px; }
 
-div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }
+#layout_container { 
+    display: flex;
+    height: 100%;
+}
+
+#map_container {
+    flex: 1 1 auto;
+    position: relative;
+    height: 100%;
+}
+
+#map_canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+#toggle_sidebar_button {  
+    width: 48px;
+    height: 40px;
+    position: absolute;
+    top: 6px;
+    right: 6px;
+}
+
+#toggle_sidebar_button.show_sidebar {
+    background-image: url("images/show_sidebar_inactive_48x40.png")
+}
+
+#toggle_sidebar_button.show_sidebar:hover {
+    background-image: url("images/show_sidebar_active_48x40.png")
+}
+
+#toggle_sidebar_button.hide_sidebar {
+    background-image: url("images/hide_sidebar_inactive_48x40.png")
+}
+
+#toggle_sidebar_button.hide_sidebar:hover {
+    background-image: url("images/hide_sidebar_active_48x40.png")
+}
+
+#sidebar_container {
+    display: flex;
+    width: 410px;
+    padding-left: 10px;
+    left: 0 !important;
+}
+
+#splitter {
+    flex: 0 0 6px;
+    cursor: col-resize;
+    background-color: #bbbbbb;
+    left: 0 !important;
+}
+
+#sidebar_canvas { 
+    flex: 1 1 auto; 
+}
 
 div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
     background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;