diff --git a/templates/footer.html b/templates/footer.html
index 8fe5dca..df6b542 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -6,7 +6,6 @@
 </footer>
 
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="/js/jquery.js"></script>
     <script src="/js/bootstrap-modal.js"></script>
     <script src="/js/bootstrap-dropdown.js"></script>
     <script src="/js/bootstrap-alert.js"></script>
diff --git a/templates/header.html b/templates/header.html
index 2d2fd4f..f306e4f 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -9,6 +9,7 @@
 		.down { vertical-align:text-bottom; }
 	</style>
 	<title>Imperial Library of Trantor</title>
+	<script src="/js/jquery.js"></script>
 </head>
 <body>
 <!-- login screen -->
diff --git a/templates/read.html b/templates/read.html
index dae6817..a89f16b 100644
--- a/templates/read.html
+++ b/templates/read.html
@@ -32,23 +32,14 @@
 {{end}}
 </div>
 
+<div class="span8">
 <script type="text/javascript">
-function iframedoc(aID){ 
-	var framecont = null;
-	var frame=document.getElementById(aID);
-	if(frame.contentDocument)
-	framecont = frame.contentDocument;
-	else 
-	framecont = document.frames[aID].document;
-	return framecont;
-}
-function iframe_resize(){
-	var myframe = document.getElementById('txt');
-	var frameDoc = iframedoc('txt');
-	myframe.height = frameDoc.body.offsetHeight+20;
+function resizeIframe() {
+	$("#bookContent").height($("#bookContent").contents().find("html").height());
 }
 </script>
-<iframe class="span8" id="txt" onload="iframe_resize();" scrolling="no" src="{{.Content}}" seamless="seamless"></iframe>
+<iframe id="bookContent" onload="resizeIframe();" style="width: 100%; border: none;" src="{{.Content}}" seamless="seamless"></iframe>
+</div>
 </div>
 
 <ul class="pager">
