Move thumbnail list to right and reduce whitespace

css/basic.css

@@ -40,13 +40,15 @@ pre {
 }
 div#page {
 	/* Full-width, responsive container */
-	width: min(100vw, 1600px);
+	width: 100%;
+	max-width: none;
 	background-color: #fff;
 	margin: 0 auto;
 	text-align: left;
 	border-color: #ddd;
 	border-style: none solid solid;
 	border-width: medium 1px 1px;
+	box-sizing: border-box;
 }
 div#container {
 	padding: 20px;

css/galleriffic-2.css

@@ -97,25 +97,33 @@ div.navigation {
 	/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
 }
 
-/* ---- Layout: thumbs (left) + slideshow (right), full width ---- */
-div#gallery {
+/* ---- Layout: slideshow (left) + thumbs (right), full width ---- */
+.gallery-wrap {
 	display: flex;
 	gap: 20px;
 	align-items: flex-start;
 }
 
-div#thumbs.navigation {
-	flex: 0 0 360px;
-	max-width: 40vw;
+.gallery-wrap > #gallery.content {
+	flex: 1 1 auto;
+	min-width: 0;
+	order: 1;
+}
+
+.gallery-wrap > #thumbs.navigation {
+	flex: 0 0 380px;
+	max-width: 38vw;
+	order: 2;
 }
 
 @media (max-width: 900px) {
-	div#gallery {
+	.gallery-wrap {
 		flex-direction: column;
 	}
-	div#thumbs.navigation {
+	.gallery-wrap > #thumbs.navigation {
 		flex: 1 1 auto;
 		max-width: none;
+		order: 2;
 	}
 }
 ul.thumbs {

index.html

@@ -31,6 +31,7 @@
 				<!-- <h2>Thumbnail rollover effects and slideshow crossfades</h2> -->
 
 				<!-- Start Advanced Gallery Html Containers -->
+				<div class="gallery-wrap">
 					<div id="gallery" class="content">
 						<div id="controls" class="controls"></div>
 						<div class="slideshow-container">
@@ -57,7 +58,7 @@
 							</li>
 						</ul>
 					</div>
-				<div style="clear: both;"></div>
+				</div>
 			</div>
 		</div>
 		<div id="footer">&copy; 2009 Trent Foley</div>