diff --git a/h5ai/footer.html b/h5ai/footer.html
index ca2d2214..60871c9b 100644
--- a/h5ai/footer.html
+++ b/h5ai/footer.html
@@ -1,5 +1,7 @@
-		<!-- generated code ends here -->
-		<div id="empty">empty</div>
+			<!-- generated code ends here -->
+		</section>
+		<section id="icons">
+		</section>
 		<section id="h5ai-bottom"></section>
 	</section>
 	<footer>
diff --git a/h5ai/header.html b/h5ai/header.html
index 01265b91..13943cce 100644
--- a/h5ai/header.html
+++ b/h5ai/header.html
@@ -12,16 +12,17 @@
 	<nav>
 		<ul>
 			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
-			<li id="icons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
-			<li id="details" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
+			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
+			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
 		</ul>
 		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
 		<section id="h5ai-top"></section>
-		<!--
-			The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
-			reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are
-			removed via javascript. The actual page should render as perfect HTML 5, even if the produced
-			source is not valid HTML 5.
-		-->
+		<section id="details">
+			<!--
+				The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
+				reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are
+				removed via javascript. The actual page should render as perfect HTML 5, even if the produced
+				source is not valid HTML 5.
+			-->
diff --git a/h5ai/main.css b/h5ai/main.css
index 0891c342..465f0323 100644
--- a/h5ai/main.css
+++ b/h5ai/main.css
@@ -162,7 +162,6 @@ table .size {
 
 
 div#empty {
-	display: none;
 	text-align: center;
 	margin: 50px 0px;
 	color: #ddd;
@@ -171,12 +170,12 @@ div#empty {
 }
 
 
-#box {
+#icons {
 	padding: 10px;
 	border: 1px solid #eee;
 	border-radius: 15px;
 }
-#box .entry {
+#icons .entry {
 	margin: 8px;
 	padding: 8px;
 	width: 100px;
@@ -188,14 +187,14 @@ div#empty {
 	cursor: pointer;
 	border: 1px solid rgba(0,0,0,0);
 }
-#box .entry:hover {
+#icons .entry:hover {
 	color: #e80;
 	border-color: #eee;
 	-webkit-box-shadow: 0px 0px 20px #555;
 	-moz-box-shadow: 0px 0px 20px #555;
 	box-shadow: 0px 0px 20px #999;
 }
-#box .entry img {
+#icons .entry img {
 	width: 48px;
 	height: 48px;
 	margin: 0px 0px 8px 0px;
diff --git a/h5ai/main.js b/h5ai/main.js
index aa8c48e8..94b92fd3 100644
--- a/h5ai/main.js
+++ b/h5ai/main.js
@@ -14,6 +14,7 @@
 
 	function init () {
 
+		checkView();
 		convertToHtml5();
 		addBreadcrumb();
 		addColumnClasses();
@@ -21,7 +22,6 @@
 		addSortOrderIcons();
 		addTopAndBottom();
 		initViews();
-		checkView();
 	};
 
 
@@ -90,7 +90,7 @@
 			} );
 		$dataRows = $( "td" ).closest( "tr" );
 		if ( $dataRows.size() === 0 || $dataRows.size() === 1 && $dataRows.find( "td.name a" ).text() === "Parent Directory" ) {
-			$( "#empty" ).show();
+			$( "#details" ).append( $( "<div id=\"empty\">empty</div>" ) );
 		}
 	};
 
@@ -135,13 +135,11 @@
 	function checkView() {
 		
 		if ( getView() === "icons" ) {
-			$( "#content table" ).hide();
-			$( "#content #empty" ).hide();
-			$( "#content #box" ).show();
+			$( "#details" ).hide();
+			$( "#icons" ).show();
 		} else {
-			$( "#content table" ).show();
-			$( "#content #empty" ).show();
-			$( "#content #box" ).hide();
+			$( "#details" ).show();
+			$( "#icons" ).hide();
 		}
 	};
 
@@ -165,7 +163,7 @@
 	
 	function initViews() {
 
-		var $box = $( "<div id=\"box\"></div>" );
+		var $div = $( "<div></div>" );
 		$( "td.name a" ).closest( "tr" ).each( function () {
 			var $tr = $( this );
 			var icon = $tr.find( "td.icon img" ).attr( "src" ).replace( "icon", "image" );
@@ -176,17 +174,17 @@
 				.click( function () {
 					document.location.href = $tr.find( "td.name a" ).attr( "href" );
 				} ).
-				appendTo( $box );
+				appendTo( $div );
 		} );
-		$box.append( $( "<div class=\"clearfix\"></div>" ) );
-		$( "#content table" ).after( $box );
+		$div.append( $( "<div class=\"clearfix\"></div>" ) );
+		$( "#icons" ).append( $div );
 
 
-		$( "#details" ).closest( "li" )
+		$( "#viewdetails" ).closest( "li" )
 			.click( function () {
 				setView( "details" );
 			} );
-		$( "#icons" ).closest( "li" )
+		$( "#viewicons" ).closest( "li" )
 			.click( function () {
 				setView( "icons" );
 			} );